Библиотека Axios уже давно является популярной альтернативой использованию AJAX или Fetch API для загрузки данных и выполнения других CRUD-операций. Давайте рассмотрим, как мы можем использовать ее в своих проектах, как легкую библиотеку, которая предлагает множество полезных функций при работе с HTTP-запросами.
Установка
Вы можете добавить в свой код Axios такими способами:
- Через NPM:
npm i --save axios - Через CDN с помощью
scriptтега:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Другие варианты также можно найти в документации.
Объект Axios и его методы/CRUD операции
Давайте сначала рассмотрим отправку базовых запросов. Для примера возьмем некоторые данные из общедоступного фейкового API с Todo по адресу jsonplaceholder.typicode.com.
Во-первых, объект Axios предоставляет различные методы для получения, отправки, обновления или удаления ресурса из API.
axios.get(url[, config])axios.post(url[, data[, config]])axios.put(url[, data[, config]])axios.patch(url[, data[, config]])axios.delete(url[, config])axios.request(config)axios.head(url[, config])
GET-запрос с помощью Axios
Для начала получим данные с помощью метода axios.get():
1 2 3 4 5 6 7 8 9 10 | const getRequest = async () => { try { const response = await axios.get('https://jsonplaceholder.typicode.com/todos/?userId=1'); console.log(response.data); } catch (err) { console.error(err); } } getRequest() |
Несколько более расширенный пример вы найдете ниже:
See the Pen Axios & Todos by HTML-plus (@ambassador) on CodePen.
В результате запроса мы получаем объект response в виде переменной. Объект Axiosresponse содержит следующие свойства:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | { // `data` — это ответ, предоставленный сервером data: {}, // `status` — это код состояния HTTP из ответа сервера status: 200, // `statusText` — это сообщение о состоянии HTTP из ответа сервера. statusText: 'OK', // `headers` — HTTP-заголовки, с которыми сервер ответил. // Все имена заголовков пишутся строчными буквами и доступны в скобках. // Пример: `response.headers['content-type']` headers: {}, // `config` — это конфигурация, предоставленная `axios` для запроса config: {}, // `request` — это запрос, который сгенерировал этот ответ. // Это последний экземпляр ClientRequest в Node.js (в перенаправлениях) // и экземпляр XMLHttpRequest в браузере. request: {} } |
Основные данные дает нам значение поля data, в котором чаще всего мы получаем JSON-результат.
Мы можем использовать объект конфигурации для отправки дополнительных параметров или заголовков. Вы можете найти все возможные параметры конфигурации запроса в документации Axios.
1 2 3 4 5 6 | const response = await axios.get('https://jsonplaceholder.typicode.com/todos', { params: { userId: 1 }, headers: {'X-Custom-Header': 'testtodos'}, }); |
Теперь, когда мы понимаем, как отправить запрос и получить данные ответа, давайте рассмотрим различные методы HTTP.
POST-запрос с использованием Axios
Далее, давайте отправим POST-запрос. Для этого подойдет метод axios.post(url[, data[, config]]).
Например, можно передавать данные в POST-запросе с новой задачей.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const postRequest = async () => { const newTodo = { userId: 1, title: 'Wash my hands', completed: false } try { const resp = await axios.post('https://jsonplaceholder.typicode.com/todos', newTodo); console.log(resp.data); } catch (err) { console.error(err); } } postRequest() |
PUT-запрос с использованием Axios
Метод PUT позволяет обновить весь объект целиком с помощью метода axios.put(url[, data[, config]]). Например, так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | const putRequest = async () => { // Обновляем объект TODO с ID 1 const updatedTodo = { id: 1, userId: 1, title: 'Updated task title', completed: true } try { const resp = await axios.put('https://jsonplaceholder.typicode.com/todos/1', updatedTodo); console.log(resp.data); } catch (err) { console.error(err); } } putRequest() |
Удаляем данные с помощью метода delete() из Axios
Метод DELETE позволяет удалить ресурс. Записывается он так: axios.delete(url[, config]).
Ниже вы найдете пример удаления первого элемента из списка дел:
1 2 3 4 5 6 7 8 9 10 11 | const deleteRequest = async () => { try { const resp = await axios.delete('https://jsonplaceholder.typicode.com/todos/1') console.log(resp.data); } catch (err) { // Обработка ошибок console.error(err); } } deleteRequest() |
Если присмотреться ко всем вышеперечисленным методам, можно увидеть сходство с нативным, встроенным во все современные браузеры Fetch API. Тем не менее Axios имеет отличия от Fetch API, о которых можно узнать в отдельной статье.
Ну, что ж, выше мы рассмотрели все основные CRUD-операции. Давайте разберемся, как отправлять одновременные запросы.
Отправка одновременных запросов с помощью Axios
Axios предоставляет аналогичную альтернативу методу Fetch API: вместо метода Promise.all() можно использовать метод axios.all(). Этот метод принимает массив запросов Axios. Если все запросы завершаются успешно, мы получаем массив, содержащий все ответы.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | const multipleRequests = () => { axios.all([ axios.get('https://jsonplaceholder.typicode.com/todos/1'), axios.get('https://jsonplaceholder.typicode.com/todos/2') ]) .then(responseArray => { //this will be executed only when all requests are successful console.log('=> Request ID: ', responseArray[0].data.id); console.log('=> Request ID: ', responseArray[1].data.id); }); } multipleRequests() // logged output: // => Request ID: 1 // => Request ID: 2 |
Как видите, переменная responseArray содержит все ответы.
Если вам не нравится использовать массив ответов, мы можем немедленно деструктурировать этот массив, как показано в примере ниже.
1 2 3 4 5 6 7 8 9 | const multipleRequests = async () => { // Use destructuring and await syntax const [req1, req2] = await axios.all([ axios.get('https://jsonplaceholder.typicode.com/todos/1'), axios.get('https://jsonplaceholder.typicode.com/todos/2') ]) } multipleRequests() |
Перехват запросов и ответов Axios
Axios предоставляет нам ряд интересных функций для перехвата как запросов, так и ответов. Он позволяет перехватывать объекты запроса или ответа до того, как они будут обработаны then и catchЭта функциональность открывает множество возможностей, таких как:
- Автоматическое добавление заголовков к каждому объекту запроса, таких как заголовки авторизации.
- Передача ошибок ответа в инструмент мониторинга для анализа.
- Изменение формата объекта ответа
Приведённый ниже пример перехватчика показывает, как можно изменить запрос, добавив дополнительное свойство, и записать в лог полезные данные. Затем мы отправляем запрос, чтобы проверить, работает ли перехватчик.
Мы можем получить доступ к перехватчикам непосредственно из объекта axios. Используя метод axios.interceptors.request.use(), мы можем переопределить поведение по умолчанию, добавив собственную логику.
1 2 3 4 5 6 7 8 9 10 11 | axios.interceptors.request.use(config => { config.name = 'my-axios-app' console.log(`Sending ${config.method} request to: ${config.url}`); return config; }, error => { return Promise.reject(error); }); // send GET request axios.get('https://jsonplaceholder.typicode.com/todos/1') |
Кроме того, давайте будем регистрировать данные об ошибках и добавлять метку времени к объекту ошибки, когда запрос не удается. Чтобы протестировать перехватчик ответов, давайте запросим задачу TODO с несуществующим идентификатором.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | axios.interceptors.response.use(response => { return response; }, error => { console.log('Не удалось выполнить запрос: ', error.config.url) error.timestamp = Date.now() return Promise.reject(error); }); // отправлен некорректный GET-запрос const invalidRequest = async () => { try { const resp = await axios.get('https://jsonplaceholder.typicode.com/todos/incorrect-id') } catch (error) { console.log('Что-то пошло не так; timestamp: ', error.timestamp) } } invalidRequest() |
Обработка ошибок
Когда Axios получает ошибку 404 или 400, он перехватывает ошибку с помощью блока catch(). Он позволяет обрабатывать ошибку. Вы можете попробовать это сами, используя приведенный ниже код.
1 2 3 4 | const url = 'https://jsonplaceholder.typicode.com/toodoos/1' axios.get(url) .then(response => console.log('good')) .catch(error => console.error('error')) // выведет 404 |
Таймаут для запроса
Возможность задать таймаут для запроса предотвращает зависание приложения. Зависание может замедлить работу приложения или привести к утечке памяти, а значит, представляет собой серьезную опасность.
Axios не устанавливает таймаут по умолчанию. Поэтому он полагается на таймаут запроса браузера. В Chrome сетевой запрос истекает через 300 секунд. Это слишком долго. Это можно изменить с помощью объекта конфигурации Axios. В приведенном ниже примере запрос прерывается после 1000 миллисекунд ожидания.
1 2 3 | const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1', { timeout: 1000 }); |
Библиотеки Axios
Поскольку Axios имеет высокую популярность среди разработчиков, что востребована в других фреймворках. Многие библиотеки модифицируют исходный код Axios или помогают в решении конкретных задач. Например, библиотека axios-response-logger помогает различными способами регистрировать ответы Axios с помощью перехватчиков.
Краткий обзор популярных библиотек Axios:
- vue-axios : Небольшая обертка для интеграции Axios в Vue.js.
- redux-axios-middleware : Промежуточное ПО Redux для получения данных с помощью HTTP-клиента axios.
- axios-api-versioning : Добавляет в Axios удобную систему версионирования API.
- react-hooks-axios: Эта библиотека добавляет пользовательские React-хуки для Axios.
- axios-logger: При отправке запроса в Node.js необходимо вывести лог в консоль. Эта библиотека отображает необходимую информацию во время обмена данными с сервером. Очень похожа на другую
axios-response-loggerбиблиотеку. - jest-mock-axios: Эта библиотека предоставляет функциональность для имитации запросов Axios для модульного тестирования с помощью Jest.
Примеры использования Axios
Довольно часто Axios используют для загрузки или отправки данных во Vue.js или React.js, хотя и на чистом JavaScript эту библиотеку использовать также удобно. Примеры с различными вариантами применения Axios вы найдете ниже.
Загрузка книг из библиотеки Google Books с помощью Vue.js и Axios от Chase.
See the Pen Vue, Axios and Google Books by Chase (@chasebank) on CodePen.
Погода в регионе с помощью Vue.js от Yago Estévez.
See the Pen Local Weather App for FreeCodeCamp by Yago Estévez (@yagoestevez) on CodePen.
Случайные пользователи с помощью RandomUser.me
Автор Jay Wolters.
See the Pen RandomUser.me with Vue.js and Axios by Jay Wolters (@jaywolters) on CodePen.
Построение графика Google Charts от Christoph
See the Pen Column Chart with Google Charts and Axios by Christoph (@c-herr) on CodePen.
Поиск фильмов
2 варианта от Yuxin Guo
See the Pen PopcornPit by Yuxin Guo (@timothyguo) on CodePen.
Сравнение фильмов от Wesley van Drimmelen
See the Pen Simple Movie Comparison App ( VanillaJS and Axios) by Wesley van Drimmelen (@elDrimm) on CodePen.
Поиск с помощью OMDb API от Estiven Lucas Peña
See the Pen Movie & Series Search by Estiven Lucas Peña (@EstivenLucas) on CodePen.
Поиск в Netflix от Talib Ibrahim
See the Pen TV Show Search App with hover overlay. by Talib Ibrahim (@talib-ibrahim) on CodePen.
