Как использовать библиотеку Axios для запросов на сервер

Веб-разработка не обходится без взаимодействия с сервером. Для этого мы используем AJAX-запросы, которые позволяют отправлять и получать данные без перезагрузки страницы. Одним из популярных инструментов для работы с AJAX-запросами является библиотека Axios. В этой статье мы рассмотрим, как использовать Axios для запросов на сервер.

Установка библиотеки Axios

Перед началом работы нам необходимо установить библиотеку Axios. Мы можем сделать это с помощью npm, выполнив следующую команду в терминале:

npm install axios

Теперь мы можем использовать Axios в своем проекте.

Отправка GET-запроса

Для отправки GET-запроса мы можем использовать метод axios.get(). Например, мы можем отправить запрос на получение списка пользователей с сервера следующим образом:

axios.get('/users')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});

В этом коде мы отправляем GET-запрос на сервер по адресу /users и обрабатываем ответ с помощью метода .then(). Если происходит ошибка при запросе, мы обрабатываем ее с помощью метода .catch().

Отправка POST-запроса

Для отправки POST-запроса мы можем использовать метод axios.post(). Например, мы можем отправить запрос на добавление нового пользователя на сервер следующим образом:

axios.post('/users', {
name: 'John Smith',
email: 'john.smith@example.com'
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});

В этом коде мы отправляем POST-запрос на сервер по адресу /users и передаем данные нового пользователя в теле запроса. Обработка ответа и ошибок происходит аналогично GET-запросу.

Дополнительные настройки

Библиотека Axios позволяет настраивать запросы под разные форматы данных, а также добавлять различные опции и возможности для пользователей.

Например, мы можем добавить заголовки к запросу, указав их в параметре headers:

axios.post('/users', {
name: 'John Smith',
email: 'john.smith@example.com'
}, {
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token
}
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});

axios.get('/users', {
timeout: 5000 // 5 секунд
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});