Какой твой любимый?

Contents
· Axios
· Fetch
· Backward Compatability
· Response Timeout
· Interceptors
· JSON Data
· Conclusion

Axios

Для тех, кто не знает, что такое Axios, это HTTP-клиент на основе обещаний для браузеров и Node.js. На стороне клиента (браузеры) он будет использовать XMLHttpRequests, а на стороне сервера - собственный модуль Node.js http. Вам просто нужно вызвать axios() и передать параметры в качестве объекта для создания запроса API.

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

Вот пример использования Axios:

const axios = require('axios');
// We need to import the package into to our workspace
axios({
  url: 'https://webapp/api/auth/sign-in',
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  data: {
    email: '[email protected]',
    password: '12345678',
  },
})
.then(respsonse => {
  console.log(response.message);
});

Принести

Fetch API - это простой интерфейс, который также позволяет разработчикам делать HTTP-запросы к серверным службам или API. Он предоставляет метод fetch(), определенный для объекта окна в браузерах. Этот метод имеет только один обязательный аргумент, который должен быть передан в него, URL-адрес ресурса, который пользователь хочет получить, вы можете и, скорее всего, также передадите объект параметров в качестве второго аргумента.

Вот пример использования Fetch API:

fetch('https://webapp/api/auth/sign-in', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    email: '[email protected]',
    password: '12345678',
  }),
})
.then(respsonse => {
  console.log(response.message);
});
  • Axios требует единственного объекта параметров, а URL-адрес определяется внутри объекта.
  • URL-адрес передается в fetch() в качестве аргумента вместо того, чтобы быть установленным в объекте параметров.
  • Axios использует свойство данных, а Fetch использует свойство body.
  • Нам нужно структурировать данные перед их отправкой с помощью Fetch.
  • Обе эти реализации также имеют похожий синтаксис.

Обратная совместимость

Причина, по которой Axios получил такое большое количество поклонников, заключается в его широкой поддержке браузерами. С другой стороны, Fetch не так широко поддерживается, вы можете проверить, какие браузеры fetch() не поддерживают здесь.

Тайм-аут ответа

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

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

Перехватчики

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

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

Данные JSON

Вспомните data, который мы установили для объекта параметров в предыдущем примере. Axios автоматически структурирует эти данные перед отправкой HTTP-запроса.

Однако это еще одна функция, которую Fetch не может предоставить по умолчанию, но опять же, это определенно то, что можно сделать с некоторым дополнительным временем.

Заключение

Достигнув этого момента, вы могли или не могли понять, что Axios имеет несколько удобных функций, предоставляемых нам по умолчанию, а Fetch - нет. Имейте это в виду, оба делают одно и то же, и оба делают это хорошо.

Большинство функций Axios также можно воспроизвести с помощью Fetch. Итак, какой из них вы должны использовать?

Axios предоставляет прекрасный универсальный пакет, который можно легко использовать, но нужны ли вам все эти функции? Всего один или два? Ваш текущий проект может прекрасно работать с Fetch, и если вам действительно нужны некоторые из этих дополнительных функций, все, что вам нужно сделать, это потратить немного времени на создание обходного пути. У вас есть масса ресурсов, чтобы узнать, как это сделать.

Так что, может быть, просто спросите себя: «Нужны ли мне какие-либо из этих функций или мой проект может жить с одной зависимостью меньше, о которой нужно беспокоиться?».



Как создать простой веб-сервер с использованием Node.js (2021 г.)
Простой веб-сервер с использованием Node.js (2021 г.) jrpotatodev.medium.com





Как создавать динамические формы с помощью response-hook-form (2021)
В этом уроке мы узнаем, как создать форму с динамическим вводом или, как некоторые называют это, расширение / расширение… jrpotatodev.medium.com



Больше контента на plainenglish.io