Axios: Ajax-запросы без jQuery

Технология Ajax очень популярна и используется на многих сайтах. В сети можно найти разные реализации функций для работы с Ajax на чистом нативном JavaScript, но с такими функциями не очень удобно работать, и, зачастую, они имеют проблемы с кроссбраузерностью, поэтому, как правило, для работы с Ajax-запросами используются различные фреймворки и библиотеки.

Самым простым и популярным решением является использование библиотеки jQuery и ее метода ajax(), но если jQuery используется только для отправки Ajax-запросов, а остальной функционал библиотеки просто «висит балластом», то использование jQuery в таком случае будет избыточным. Для этого можно выбрать профильную библиотеку, которая будет в разы меньше, что будет способствовать быстродействию работы сайта. Одну из таких библиотек мы и рассмотрим в этом коротком посте.

JavaScript библиотека Axios

Axios — это кроссбраузерная легковесная JS-библиотека для работы с HTTP-запросами, построенная на Promise API. Axios может работать как с NodeJS, так и с браузерным JavaScript; это очень удобно, если нужно просто подключить скрипт к веб-странице, не поднимая при этом NodeJS. Официальная страница библиотеки с документацией и исходниками на GitHub, а у кого проблемы с английским, то есть перевод документации.

Я не буду пересказывать документацию, там все понятно описано с примерами кода, покажу лишь основные моменты при работе с браузерным JavaScript и отличие от jQuery.ajax().

Для подключения Axios к веб-странице можно воспользоваться CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Использование библиотеки очень простое:

// Делаем GET запрос, чтобы получить товар
// с указанным параметром ID = 123.
axios.get('/product?id=123')
	.then(function (response) {
		console.log(response);
	})
	.catch(function (error) {
		console.log(error);
	});

// Параметры можно передавать отдельно, 
// в виде объекта `params`.
axios.get('/product', {
		params: {
			id: 123
		}
	})
	.then(function (response) {
		console.log(response);
	})
	.catch(function (error) {
		console.log(error);
	});

// В POST-запросе объект `params` не требуется, а данные
// отправляются в виде произвольных объектов с параметрами.
axios.post('/product', {
	    id: 123,
	    code: 'asd098'
	})
	.then(function (response) {
	    console.log(response);
	})
	.catch(function (error) {
	    console.log(error);
	});

// Кроме передаваемых данных можно указывать 
// параметры конфигурации самого запроса.
axios({
  	method: 'POST',
  	headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  	url: '/product/123',
  	data: {
    	id: 123,
	    code: 'asd098'
  	}
});

Принципиальным отличием от jQuery.ajax() является формат отправляемых данных методом $_POST. Если jQuery.ajax() отправляет данные с заголовком Content-Type: application/x-www-form-urlencoded;, то Axios с заголовком Content-Type: application/json;, то есть данные отправляются в JSON формате,  поэтому в обработчике, который принимает данные (в большинстве случаев это PHP-скрипт), массив $_POST будет пустым. При необходимости можно изменить заголовки при отправке данных, но это будет не лучший вариант. Для того чтобы получить все отправленные данные в JSON формате, нужно обратиться к потоку php://input.

$_POST = json_decode(file_get_contents('php://input'), true);

Для получения данных в виде ассоциативного массива передаем true вторым параметром функции json_decode(), если необходимо получить данные в виде объекта, то измените на false или удалите второй параметр. На этом данный пост буду заканчивать, если заинтересовала библиотека, читайте документацию, ссылки дал выше. Если что-то не понятно, спрашивайте в комментариях.

Похожие записи: Всплывающая форма обратной связи используя Bootstrap 4 Контактная форма обратной связи для сайта своими руками Open Server: установка и работа с сервером

Добавить комментарийОтменить ответ

Нажимая на кнопку «Добавить», я даю согласие на обработку своих персональных данных в соответствии с политикой конфиденциальности