Рубрики
Без рубрики

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

Axios – это основанная на Promised библиотека JavaScript, которая отправляет HTTP-запросы. В этом руководстве показано, как с помощью Axios отправлять различные HTTP-запросы к JSON API.

Введение

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

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

  • В этой статье используется стрелочная нотация, введенная в ES2015 для определения функций. Подробнее о ней вы можете прочитать в статье Стрелочные функции в JavaScript.
  • Axios – это библиотека, основанная на Promise. Если вам нужно узнать больше о Promises, вы можете прочитать наше руководство Promises в Node.js.
  • Чтобы улучшить работу с Promises, мы будем использовать синтаксис Node.js async/await. Вы можете прочитать нашу статью Node.js Async Await in 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 использует Promises для выполнения сетевых запросов, обратные вызовы не являются опцией при использовании этой библиотеки. Мы взаимодействуем с Axios, используя Promises или ключевые слова async/await, которые являются альтернативным синтаксисом для использования Promises.

Импортирование 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-ответе:

  • data – Тело ответа, предоставленное сервером. Если ответ от сервера представляет собой JSON, Axios автоматически разберет данные в объект JavaScript.
  • status – Код состояния HTTP из ответа, например, 200, 400, 404.
  • statusText – Сообщение о статусе HTTP из ответа сервера, например, OK, Bad Request, Not Found.
  • headers – HTTP-заголовки, сопровождающие ответ.
  • config – Конфигурация, которая была предоставлена Axios API для запроса.
  • 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

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

Давайте удалим запись блога, отправив запрос 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 в методе, конечную точку 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, таким как axios.post(), axios.put(), axios.delete(). Свойство headers следует вводить после объекта данных в axios.post() и axios.put().

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

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 – axios.get(), axios.post(), axios.put() и axios.delete(). Вы также использовали API Axios для отправки HTTP-запросов, сконфигурировав объект JavaScript с деталями запроса. Наконец, вы добавили пользовательские заголовки в свои запросы.

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

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

Оригинал: “https://stackabuse.com/making-asynchronous-http-requests-in-javascript-with-axios/”

Читайте ещё по теме: