Выполнение асинхронных HTTP-запросов в JavaScript с помощью Axios

Введение Axios - это основанная на обещаниях библиотека JavaScript, которая используется для отправки HTTP-запросов. Вы можете рассматривать его как альтернативу встроенной функции JavaScript fetch (). [/ using-fetch-to-send-http-requests-in-javascript /] В этом руководстве мы будем использовать такие функции, как Promises, async / await и другие современные шаблоны проектирования JavaScript. Если вы хотите ускориться или освежить свою память, вам будет интересно прочитать эти статьи, прежде чем продолжить: * В этой статье стрелка используется, а не

Вступление

Axios - это основанная на обещаниях библиотека JavaScript, которая используется для отправки HTTP-запросов. Вы можете рассматривать его как альтернативу встроенной функции fetch()

В этом руководстве мы будем использовать такие функции, как Promises, async/await и другие современные шаблоны проектирования JavaScript. Если вы хотите ускориться или освежить свою память, вам будет интересно прочитать эти статьи, прежде чем продолжить:

  • В этой статье для определения функций используются обозначения стрелок, представленные в ES2015. Вы можете прочитать об этом в статье « Стрелочные функции в JavaScript».
  • Axios - это библиотека на основе обещаний. Если вам нужно узнать больше о обещаниях, вы можете прочитать наше руководство по обещаниям в Node.js.
  • Чтобы улучшить наш опыт работы с обещаниями, мы будем использовать синтаксис async/await Вы можете прочитать нашу статью Node.js Async Await в ES7, чтобы освоить эту функцию!

В этом руководстве мы будем выполнять GET , POST , PUT и DELETE к REST API с помощью Axios. Давайте узнаем немного больше об этой библиотеке.

Что такое Axios?

Axios - это современная клиентская HTTP-библиотека на основе Promise. Это означает, что Axios используется для отправки HTTP-запроса и обработки их ответов с использованием обещаний JavaScript. Axios поддерживает в браузере как Node.js, так и JavaScript.

Axios также бесплатен и имеет открытый исходный код. Вы можете посетить его репозиторий GitHub, чтобы увидеть его код и документацию.

В него встроена некоторая веб-безопасность, защищающая пользователей от атак, таких как подделка межсайтовых запросов (CSRF) .

Благодаря своим функциям и простоте использования, он стал популярным выбором для разработчиков JavaScript при выполнении HTTP-вызовов. Начнем с настройки Axios.

Настройка Axios

Давайте сначала создадим новую папку и инициализируем NPM с настройками по умолчанию:

 $ mkdir axios-tutorial 
 $ cd axios-tutorial 
 $ npm init -y

Затем мы можем использовать NPM для установки библиотеки:

 $ npm i --save axios

Примечание . Если вы используете TypeScript в своем проекте (например, с приложением Angular), библиотека Axios поставляется вместе с определениями типов. Вам не нужно делать лишних шагов для установки типов!

Если вы находитесь в браузере, вы также можете использовать CDN для импорта скрипта.

 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

В этом руководстве для загрузки наших библиотек используется Node.js с CommonJS. CommonJS - это стандарт для загрузки модулей, в частности, для этого он определяет ключевое слово require() Примеры должны работать независимо от платформы без каких-либо изменений.

Теперь, когда мы настроили Axios в нашей среде разработки, давайте сразу приступим к выполнению HTTP-запросов.

Написание асинхронных запросов с помощью Axios

В Node.js операции ввода и вывода, такие как сетевые запросы, выполняются асинхронно. Поскольку Axios использует обещания для выполнения сетевых запросов, обратные вызовы не подходят при использовании этой библиотеки. Мы взаимодействуем с Axios с помощью обещаний или async/await которые являются альтернативным синтаксисом для использования обещаний.

Импорт Axios

Если вы используете CommonJS, в Node.js есть два метода импорта библиотеки.

Вы можете импортировать модуль в свой код следующим образом:

 const axios = require('axios')

Однако многие редакторы IDE и кода могут предложить лучшее автозаполнение при импорте следующим образом:

 const axios = require('axios').default;

Это работает при использовании CommonJS для импорта модулей. Мы рекомендуем вам использовать второй метод в качестве автозаполнения, и просмотр документации по коду в вашей среде IDE может упростить процесс разработки.

С импортированной библиотекой мы можем начать делать HTTP-запросы.

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

Отправим наш первый запрос через Axios! Это будет GET , обычно используемый для получения данных.

Мы сделаем HTTP-запрос к внешнему API, который отправит нам список сообщений в блоге. Получив данные, мы запишем их содержимое в консоль. Если мы обнаружим ошибку, мы ее тоже зарегистрируем.

Давайте посмотрим, как сделать его, используя синтаксис Promise по умолчанию. В новый файл с именем getRequestPromise.js добавьте следующий код:

 const axios = require('axios').default; 
 
 axios.get('https://jsonplaceholder.typicode.com/posts') 
 .then(resp => { 
 console.log(resp.data); 
 }) 
 .catch(err => { 
 // Handle Error Here 
 console.error(err); 
 });

Чтобы сделать GET , мы передаем URL-адрес ресурса в качестве аргумента в axios.get() .

Если вы запустите этот код с node getRequestPromise.js , вы увидите следующий результат:

 [ { userId: 1, 
 id: 1, 
 title: 
 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit', 
 body: 
 'quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum 
 est autem sunt rem eveniet architecto' }, 
 { userId: 1, 
 id: 2, 
 title: 'qui est esse', 
 body: 
 'est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro ve 
 l nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla' }, 
 ...

Теперь давайте посмотрим, как мы можем переписать тот же код, используя ключевые слова async/await В новый файл getRequestAsyncAwait.js добавьте следующий код:

 const axios = require('axios'); 
 
 const sendGetRequest = async () => { 
 try { 
 const resp = await axios.get('https://jsonplaceholder.typicode.com/posts'); 
 console.log(resp.data); 
 } catch (err) { 
 // Handle Error Here 
 console.error(err); 
 } 
 }; 
 
 sendGetRequest();

Чтобы использовать async/await , нам нужно обернуть вызов функции axios.get() async функции. Мы заключаем вызов метода в блок try...catch чтобы мы могли фиксировать любые ошибки, аналогично catch() который мы использовали в версии Promise. Переменная, получившая данные HTTP, должна была использовать await чтобы гарантировать получение асинхронных данных, прежде чем продолжить. С этого момента в наших примерах мы будем использовать только async/await

Запуск этого кода выведет на консоль тот же вывод, что и исходный пример Promise.

Ответ Axios на HTTP-запрос ( resp в примере) будет содержать следующую информацию об ответе HTTP:

  1. data - тело ответа, предоставленное сервером. Если ответ сервера является JSON, Axios автоматически анализирует данные в объект JavaScript.
  2. status - код состояния HTTP из ответа, например 200 , 400 , 404 .
  3. statusText - сообщение о статусе HTTP из ответа сервера, например OK , Bad Request , Not Found .
  4. headers - заголовки HTTP, сопровождающие ответ.
  5. config - конфигурация, предоставленная API Axios для запроса.
  6. request - Собственный запрос, который сгенерировал ответ. В Node.js это будет объект ClientRequest В браузере это будет объект XMLHTTPRequest

Теперь, когда мы увидели, как сделать GET запрос с помощью Axios, давайте посмотрим, как сделать POST запрос.

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

Мы отправляем POST для создания нового ресурса в REST API. В этом случае мы сделаем POST запрос с Axios, чтобы создать новую запись в блоге для пользователя.

Создайте новый файл с именем postRequest.js и введите следующий код:

 const axios = require('axios').default; 
 
 const newPost = { 
 userId: 1, 
 title: 'A new post', 
 body: 'This is the body of the new post' 
 }; 
 
 const sendPostRequest = async () => { 
 try { 
 const resp = await axios.post('https://jsonplaceholder.typicode.com/posts', newPost); 
 console.log(resp.data); 
 } catch (err) { 
 // Handle Error Here 
 console.error(err); 
 } 
 }; 
 
 sendPostRequest();

Чтобы отправить POST с помощью axios.post() вы должны сначала указать URL-адрес, а затем предоставить данные запроса во втором аргументе. В этом случае мы отправляем данные в newPost , которые будут отправлены в наш API как JSON.

Выполнение этого с помощью node postRequest.js дает следующий успешный результат:

 { userId: 1, 
 title: 'A new post', 
 body: 'This is the body of the new post', 
 id: 101 }

Давайте посмотрим, как мы можем отправлять запросы PUT

Отправка запросов PUT

PUT используются для замены данных в конечной точке. Вы можете использовать метод axios.put() для отправки PUT аналогично тому, как мы отправляем запросы POST

Чтобы увидеть это в действии, давайте создадим PUT который обновляет свойства первого сообщения в блоге. Создайте новый файл с именем putRequest.js с приведенным ниже кодом:

 const axios = require('axios').default; 
 
 const updatedPost = { 
 id: 1, 
 userId: 1, 
 title: 'A new title', 
 body: 'Update this post' 
 }; 
 
 const sendPutRequest = async () => { 
 try { 
 const resp = await axios.put('https://jsonplaceholder.typicode.com/posts/1', updatedPost); 
 console.log(resp.data); 
 } catch (err) { 
 // Handle Error Here 
 console.error(err); 
 } 
 }; 
 
 sendPutRequest();

Как и в случае с POST , мы предоставляем URL-адрес и данные, которые хотим загрузить. Выполнение этого с помощью node putRequest.js дает нам:

 { id: 1, userId: 1, title: 'A new title', body: 'Update this post' }

Теперь, когда мы рассмотрели два способа загрузки данных, давайте посмотрим, как мы можем удалить данные.

Отправка запросов DELETE

Вы можете отправить HTTP- DELETE с помощью axios.delete() для удаления данных из RESTful API.

Давайте удалим сообщение в блоге, отправив DELETE с помощью Axios. В новом файле с именем deleteRequest.js введите следующее:

 const axios = require('axios').default; 
 
 const sendDeleteRequest = async () => { 
 try { 
 const resp = await axios.delete('https://jsonplaceholder.typicode.com/posts/1') 
 console.log(resp.data); 
 } catch (err) { 
 // Handle Error Here 
 console.error(err); 
 } 
 }; 
 
 sendDeleteRequest();

Для функции axios.delete() нужен только URL-адрес ресурса, который мы хотим удалить. Выполнение этой программы с помощью node putRequest.js отображает это в терминале:

 {}

Это означает, что данные не были возвращены, что нормально при удалении ресурса. Однако, поскольку Axios не генерировал никаких ошибок, мы уверены, что они были обработаны правильно.

Давайте посмотрим на альтернативный способ отправки запросов Axios с использованием конфигураций,

Настройка запросов

В качестве альтернативы указанию функции для выполнения запроса мы можем предоставить объект JavaScript, который настраивает, как Axios отправляет запрос. Например, если я хотел отправить PUT без использования axios.put() , мы можем настроить Axios следующим образом:

 const axios = require('axios').default; 
 
 const sendRequest = async () => { 
 try { 
 const resp = await axios({ 
 method: 'PUT', 
 url: 'https://jsonplaceholder.typicode.com/posts/1', 
 data: { 
 id: 1, 
 userId: 1, 
 title: 'A new title', 
 body: 'Update this post' 
 } 
 }); 
 
 console.log(resp.data); 
 } catch (err) { 
 // Handle Error Here 
 console.error(err); 
 } 
 } 
 
 sendRequest();

В этом случае мы используем axios напрямую как функцию. Мы передаем ему функцию JavaScript, которая содержит метод HTTP, используемый в method , конечную точку API в url и любые данные в запросе в свойстве data

Конечный результат тот же, поэтому вы можете использовать этот способ отправки запросов, если он вам больше нравится.

Теперь, когда у нас есть обработчик отправки запросов, давайте изменим их, установив собственные заголовки.

Установить собственные заголовки

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

Если бы мы использовали JWT для аутентификации и авторизации , нам пришлось бы добавить его в наши запросы, чтобы он не был отклонен сервером API.

Давайте посмотрим, как мы можем добавить пользовательские заголовки к вызову метода axios.get()

 const axios = require('axios').default; 
 
 const sendGetRequest = async () => { 
 try { 
 const resp = await axios.get('https://jsonplaceholder.typicode.com/posts', { 
 headers: { 
 'authorization': 'Bearer YOUR_JWT_TOKEN_HERE' 
 } 
 }); 
 
 console.log(resp.data); 
 } catch (err) { 
 // Handle Error Here 
 console.error(err); 
 } 
 }; 
 
 sendGetRequest();

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

Вы можете добавить это свойство к другим методам axios.post() , axios.put() , axios.delete() . Свойство headers следует вводить после объекта data axios.post() и axios.put() .

Затем давайте посмотрим, как мы можем установить собственный заголовок с помощью конфигурации API Axios:

 const axios = require('axios').default; 
 
 axios({ 
 method: 'GET', 
 url: 'https://jsonplaceholder.typicode.com/posts', 
 headers: { 
 'authorization': 'Bearer YOUR_JWT_TOKEN_HERE' 
 } 
 }).then(resp => { 
 console.log(resp.data); 
 }).catch(err => { 
 // Handle Error Here 
 console.error(err); 
 });

В этом случае заголовки - это просто еще одно свойство объекта JavaScript!

Заключение

В этой статье вы узнали, как создавать асинхронные HTTP-запросы с помощью Axios в Node.js и JavaScript в браузере. Вы делали запросы с помощью методов axios.get() , axios.post() , axios.put() и axios.delete() . Вы также использовали Axios API для отправки HTTP-запросов, настроив объект JavaScript с деталями запроса. Наконец, вы добавили собственные заголовки в свои запросы.

Мы надеемся, что теперь вы хорошо понимаете, как использовать Axios для своего следующего приложения! Что вы собираетесь построить дальше?

Исходный код этой статьи доступен на GitHub .

comments powered by Disqus

Содержание