Одна вещь, которую я всегда обсуждал, начиная новый проект внешнего интерфейса, заключается в следующем: должен ли я использовать fetch API? Или я должен использовать Axios? Здесь я опишу разницу между каждым инструментом, чтобы вы могли принять обоснованное решение о том, какие инструменты использовать.

Давайте сначала вспомним основы каждого инструмента, начиная с Fetch. Fetch API — это встроенный в браузер API для получения данных с серверов. Если у вас есть опыт использования XMLHttpRequest, то этот API в основном является его более простой версией. Вот пример кода этого API.

Теперь поговорим об Axios. Как и Fetch API, Axios — это NPM-библиотека для получения данных с серверов. Если Fetch API можно использовать только на стороне браузера, то Axios можно использовать как на стороне браузера, так и на стороне сервера. Это связано с тем, что метод получения данных отличается для каждой стороны. На стороне браузера используется XMLHttpRequest. На стороне сервера используется модуль http. Вот пример кода этого API.

Обратите внимание, что Axios необходимо использовать одно обещание для получения тела данных, в то время как Fetch API использует стиль двойных обещаний. Это связано с тем, что Fetch API возвращается, как только получен считыватель ответа. Затем API нужно дождаться загрузки тела, отсюда и стиль двойного обещания.

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

  • Общий
  • Обработка ошибок
  • Совместимость
  • Тайм-аут
  • Перехватчики

Общий

Итак, давайте начнем с общей разницы. Чуть раньше мы обсуждали, что Fetch API использует двойные промисы, а Axios — одинарные промисы. Единственное обещание Axios сделать его более удобным для случая, когда тело не такое большое. Если ваш вариант использования — просто обмен простыми данными JSON, то Axios, вероятно, будет для вас более удобным. Но если вы отправляете большие данные, такие как изображение, вы можете попробовать Fetch API и посмотреть, подходит ли он вам.

Мы также можем полифилить Fetch API, сделав его единым стилем промисов, как Axios. Приведенный ниже код представляет собой единый стиль обещания Fetch API.

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

Обработка ошибок

При выборке данных всегда есть вероятность возникновения какой-либо ошибки. Такая ошибка, как недействительные учетные данные, URL-адрес не найден или даже ошибка сервера, является возможностью ошибки, которую необходимо обрабатывать. В Fetch API, чтобы проверить, является ли запрос недействительным, мы можем проверить его, увидев атрибут Response.ok. Этот атрибут вернет true , если ответ находится в диапазоне 200–299, и false в противном случае.

В то время как для Axios обработка ошибок аналогична другим объектам на основе Promise: Использование обработчика catch. Все неудачные запросы будут отклонены и могут быть сопоставлены с помощью этого обработчика. Следующий пример является официальным примером из Axios docs. Мы видим, что в примере обработку ошибок можно разделить на 3 категории:

  • Ошибка в ответе: код состояния вне диапазона 200–299.
  • Ошибка в запросе: Запрос сделан, но ответ не получен.
  • Другие виды ошибок: Не удается отправить запрос.

Совместимость

Далее давайте обсудим совместимость браузера. По сравнению с совместимостью с Fetch API Axios гораздо лучше совместим с ранней версией браузера. Это связано с тем, что на стороне браузера Axios использует XMLHttpRequest. Если вы видите в XMLHttpRequest docs, эта функция совместима с более ранними версиями браузера. Это означает, что когда вы используете Fetch API, вы должны понимать, что он может не работать на какой-то более ранней версии. В большинстве случаев это не должно вызывать проблем, потому что не так много людей не обновляют свои браузеры.

Тайм-аут

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

В то время как для Fetch API для этого нет встроенной функциональности. Но в более новой версии браузера есть интерфейс под названием AbortControler, который мы можем использовать. Проще говоря, AbortController — это интерфейс, который мы можем использовать для прерывания запроса на выборку, который все еще выполняется. Пример использования этого интерфейса можно увидеть ниже.

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

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

Закрытие

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

Здравствуйте, меня зовут Адьякса, и я пишу о разработке программного обеспечения и своем опыте изучения языков. Я планирую выпускать еженедельный блог о чем-то, что я нахожу интересным во время работы над своими сторонними проектами. Если вам интересно, вы можете подписаться на меня, чтобы быть в курсе!

Ресурсы: