Axios — очень популярный вариант для выполнения HTTP-запросов в JavaScript. Узнайте, как сделать это эффективно, с помощью этого подробного руководства.

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

Начало работы с Axios

Вы можете использовать Axios в своем приложении, используя сеть доставки контента (CDN) или установив его в свой проект.

Чтобы использовать Axios непосредственно в HTML, скопируйте приведенную ниже ссылку CDN и вставьте ее в раздел заголовка вашего HTML-файла:

<сценарийисточник=" https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">сценарий>

При таком подходе вы можете использовать Axios и его HTTP-методы в теле ваших HTML-скриптов. Аксиос также может использовать REST API в такой среде, как React.

Чтобы использовать Axios в проекте Node.js, установите его в каталог проекта с помощью диспетчера пакетов npm или yarn:

instagram viewer 
npm установить аксиомы
# или
пряжа добавить аксиомы

После установки вы можете начать использовать Axios в своем проекте JavaScript:

константа аксиос = требовать(аксиос);

В этом руководстве вы будете работать с бесплатными JSONPlaceholder API. Хотя этот API имеет набор ресурсов, вы будете использовать только /comments и /posts конечные точки. Конечные точки — это определенные URL-адреса, к которым можно получить доступ для извлечения данных или управления ими.

Выполнение запросов GET с помощью Axios

Есть несколько способов сделать запрос GET с помощью Axios. Однако синтаксис обычно зависит от предпочтений.

Один из способов сделать GET-запрос — использовать аксиос() метод с объектом, который определяет метод запроса как получать и URL-адрес для отправки запроса.

Например:

константа аксиос = требовать("аксиос");
аксиос({
 метод: "получать",
 URL: " https://jsonplaceholder.typicode.com/comments",
})
 .затем((разрешение) => {
консоль.log(рез.данные);
 })
 .ловить((ошибаться) => {
консоль.ошибка (ошибка);
 });

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

Axios также предоставляет более простой способ выполнения запросов GET, который устраняет необходимость передачи объекта путем объединения запросов. .получать() метод к аксиомы пример.

Например:

аксиомы
 .получать(" https://jsonplaceholder.typicode.com/comments")
 .затем((разрешение) => {
консоль.log(рез.данные);
 })
 .ловить((ошибаться) => {
консоль.ошибка (ошибка);
 });

Выполнение запросов POST с помощью Axios

Выполнение запроса POST с помощью Axios похоже на выполнение запроса GET. С помощью этого запроса вы можете отправить данные на сервер.

Приведенный ниже фрагмент кода является примером использования Axios. .почта() метод:

аксиомы
 .почта(" https://jsonplaceholder.typicode.com/comments", {
 имя: "Джексон Смит",
 электронная почта: "[email protected]",
 тело: «Это произведение искусства».,
 })
 .затем((разрешение) => {
консоль.log(рез.данные);
 })
 .ловить((ошибаться) => {
консоль.ошибка (ошибка);
 });

Код отправляет запрос POST к API JSONPlaceholder для создания нового комментария. axios.post метод отправляет данные в /comments конечная точка.

Данные, отправляемые в запросе, представляют собой объект с имя, электронная почта, и тело свойство. Если запрос выполнен успешно, затем метод записывает данные ответа на консоль. И если есть ошибка, то ловить метод записывает ошибку в консоль.

Выполнение запросов PUT/PATCH с помощью Axios

Вы можете использовать запрос PUT или PATCH для обновления существующего ресурса на сервере. В то время как PUT заменяет весь ресурс, PATCH обновляет только указанные поля.

Чтобы сделать запрос PUT или PATCH с помощью Axios, вам нужно использовать .помещать() или .пластырь() методы соответственно.

Вот пример того, как использовать эти методы для обновления электронная почта свойство комментария с идентификатором 100:

константа аксиос = требовать("аксиос");
аксиомы
 .получать(" https://jsonplaceholder.typicode.com/comments/100")
 .затем((разрешение) => {
консоль.log(res.data.email);
 })
 .ловить((ошибаться) => {
консоль.ошибка (ошибка);
 });


// Выход:
// '[email protected]'


аксиомы
 .пластырь(" https://jsonplaceholder.typicode.com/comments/100", {
 электронная почта: "[email protected]",
 })
 .затем((разрешение) => {
консоль.log(res.data.email);
 })
 .ловить((ошибаться) => {
консоль.ошибка (ошибка);
 });
// Выход:
// '[email protected]',

Эта программа сначала делает запрос GET к конечной точке " https://jsonplaceholder.typicode.com/comments/100". Затем он регистрирует электронная почта свойство комментария с идентификатором 100 к консоли. Мы делаем запрос GET, чтобы вы могли увидеть, что изменилось после выполнения запроса PATCH.

Второй запрос — это запрос PATCH к той же конечной точке. Этот код обновляет адрес электронной почты комментария на [email protected].

Выполнение запросов DELETE с помощью Axios

Вы можете использовать УДАЛИТЬ запрос на удаление ресурса на сервере.

Возьмите следующий пример того, как использовать .удалить() метод удаления ресурса с сервера:

аксиомы
 .удалить(" https://jsonplaceholder.typicode.com/comments/10")
 .затем((разрешение) => {
консоль.log(рез.данные);
 })
 .ловить((ошибаться) => {
консоль.ошибка (ошибка);
 });
//Output:
// {}

Записав в консоль пустой объект, приведенный выше код показывает, что он удалил комментарий с идентификатором 10.

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

Вы можете получать данные с нескольких конечных точек одновременно, используя Axios. Для этого необходимо использовать .все() метод. Этот метод принимает массив запросов в качестве своего параметра и разрешается только тогда, когда вы получаете все ответы.

В следующем примере .все() метод извлекает данные из двух конечных точек одновременно:

аксиомы
 .все([
 аксиос.получить(" https://jsonplaceholder.typicode.com/comments? _лимит=2"),
 аксиос.получить(" https://jsonplaceholder.typicode.com/posts? _лимит=2"),
 ])
 .затем(
 axios.spread((комментарии, посты) => {
консоль.log(комментарии.данные);
консоль.log(сообщения.данные);
 })
 )
 .ловить((ошибаться) =>консоль.ошибка (ошибка));

Приведенный выше блок кода отправляет запросы одновременно, а затем передает ответы в .затем() метод. Аксиос .распространение() метод разделяет ответы и присваивает каждому ответу свою переменную.

Наконец, консоль регистрирует данные свойство двух ответов: комментариев и сообщений.

Перехват запросов с помощью Axios

Иногда вам может понадобиться перехватить запрос, прежде чем он попадет на сервер. Вы можете использовать Axios' перехватчики.request.use() метод перехвата запросов.

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

axios.interceptors.request.use(
 (конфиг) => {
консоль.бревно(`${config.method} запрос сделан`);
возвращаться конфигурация;
 },
 (ошибка) => {
возвращатьсяОбещать.отклонить (ошибка);
 }
);
аксиомы
 .получать(" https://jsonplaceholder.typicode.com/comments? _лимит=2")
 .затем((разрешение) =>консоль.log(рез.данные))
 .ловить((ошибаться) =>консоль.ошибка (ошибка));

Программа определяет перехватчик Axios с помощью axios.interceptors.request.use метод. Этот метод занимает конфигурация и ошибка объекты в качестве аргументов. конфигурация объект содержит информацию о запросе, включая метод запроса (config.метод) и URL запроса (config.url).

Функция-перехватчик возвращает конфигурация объект, позволяя запросу выполняться в обычном режиме. В случае ошибки функция возвращает отклоненный Обещать объект.

Наконец, программа делает запрос на проверку перехватчика. Консоль зарегистрирует тип сделанного запроса, в данном случае запрос GET.

Axios — это больше

Вы узнали, как делать и перехватывать запросы в своих проектах с помощью Axios. Многие другие функции, такие как преобразование запросов и использование экземпляров Axios, доступны для изучения вам как разработчику JavaScript. Axios остается предпочтительным вариантом для выполнения HTTP-запросов в ваших приложениях JavaScript. Однако Fetch API — еще один хороший вариант, который вы можете изучить.