Лучше ли Axios, чем fetch()?

Бывают случаи, когда Axios не лучший вариант для отправки HTTP-запросов, но есть и другие варианты. Некоторые разработчики, без сомнения, предпочитают Axios встроенным API из-за его простоты. Однако многие люди недооценивают потребность в такой библиотеке. API-интерфейс fetch() прекрасно воспроизводит основные функции Axios с дополнительным преимуществом, поскольку он доступен во всех современных браузерах.

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

  • Разница в синтаксисе
  • Обратная совместимость
  • Время ожидания ответа
  • Автоматическое преобразование данных JSON
  • Перехватчики HTTP
  • Прогресс загрузки
  1. Основное отличие синтаксиса

Чтобы доставить данные в конечную точку, fetch() использует свойство body для почтового запроса, тогда как Axios использует свойство data.

Метод JSON.stringify используется для преобразования данных в fetch() в строку.

Axios автоматически изменяет данные, возвращаемые с сервера, однако fetch() требует, чтобы вы вызывали ответ. Чтобы преобразовать данные в объект JavaScript, используйте метод JSON.

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

Широкая поддержка браузеров Axios является одним из основных факторов продаж. Даже старые браузеры, такие как Internet Explorer 11, могут без проблем запускать Axios. Это связано с тем, что он основан на XMLHttpRequest.

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

Чтобы начать установку полифилла fetch() с помощью команды npm, выполните следующие действия:

npm установить whatwg-fetch — сохранить

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

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

Например,

Fetch() и интерфейс AbortController предоставляют сопоставимые возможности. Однако это не так просто, как версия Axios:

Используя AbortController, мы создали объект AbortController. Мы можем прервать запрос позже, используя конструктор abort(). AbortController имеет доступное только для чтения свойство Signal, которое позволяет вам взаимодействовать с запросом или прерывать его. Если сервер не отвечает в течение пяти секунд, вызывается controller.abort(), и действие прерывается.

4. Автоматическое преобразование данных JSON

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

Например,

Автоматическое преобразование данных — хорошая функция, но это не то, с чем fetch не может справиться ().

5. HTTP-перехватчики

Способность Axios перехватывать HTTP-запросы — одна из самых важных функций. Когда вам нужно проанализировать или изменить HTTP-запросы от вашего приложения к серверу или наоборот, вам пригодятся перехватчики HTTP (например, ведение журнала, аутентификация или повторная попытка неудачного HTTP-запроса).

Чтобы объявить перехватчик запросов в Axios,

Метод axios.interceptors.request.use() используется в этом коде для определения кода, который будет выполняться перед отправкой HTTP-запроса. Axios.interceptors.response.use() также можно использовать для перехвата ответа сервера. Давайте представим, что произошел сбой в сети; вы можете использовать перехватчики ответов, чтобы повторить тот же запрос.

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

6. Ход загрузки

При загрузке огромных активов индикация прогресса весьма полезна, особенно для тех, у кого низкая скорость интернета. Ранее индикаторы выполнения реализовывались разработчиками JavaScript с помощью обработчика обратного вызова XMLHttpRequest.onprogress.

В Fetch API нет обработчика прогресса. Вместо этого он предоставляет экземпляр ReadableStream через поле тела объекта ответа.

Использование ReadableStream для предоставления пользователям немедленной обратной связи во время загрузки изображения демонстрируется в следующем примере:

Axios упрощает добавление индикации прогресса, особенно если вы используете модуль Axios Progress Bar. Для начала добавьте в документ следующие стили и скрипты:

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

Этот код асинхронно считывает загруженное изображение с помощью API FileReader. Данные изображения возвращаются методом readAsDataURL в виде строки в кодировке Base64, которая затем вставляется в атрибут src тега img для отображения изображения.

Заключение

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