Одна из основных задач, которую должен знать каждый Frontend-разработчик, - это как общаться с Backend-серверами (включая и сторонние) через протоколы HTTP. Есть много способов сделать это, но два из самых известных - использование «Fetch» или «Axios» для выполнения HTTP-запросов. В этой смертельной битве мы проанализируем обоих чемпионов области.

Первый раунд: подготовка

Первое, на что нам нужно обратить внимание, это то, сколько работы необходимо, прежде чем мы начнем использовать их в нашем коде.

Принести

Большинство современных браузеров поддерживают «Fetch», поскольку он поставляется непосредственно с Javascript. Поэтому нет необходимости включать какую-либо библиотеку или CDN.

Axios

Поскольку «Axios» - это сторонняя библиотека. Мы можем включить его в наш проект одним из двух способов:

  1. Использование CDN

2. С помощью любого диспетчера пакетов, например «npm» или «bower».

npm install axios
or
bower install axios

Здесь первый раунд идет в «Fetch», так как он не требует настройки.

Fetch: +1, Axios: 0

Второй раунд: базовый синтаксис

Внешний вид может быть обманчивым, но для разработчика это может иметь большое значение.

Давайте посмотрим, как сделать запрос POST с помощью Fetch.

Давайте сделаем тот же запрос, используя «Axios».

  1. «Fetch» принимает два аргумента: «URL» и «Параметры», тогда как «Axios» принимает только один параметр, URL-адрес задается в самом параметре. При желании вы также можете передать «URL» в качестве отдельного параметра в «Fetch». Я думаю, что эта функция не дает одного преимущества перед другим.
  2. Для отправки данных «Fetch» использует свойство «body», тогда как «Axios» использует свойство «data " имущество. Я думаю, что эта функция не дает одного преимущества перед другим.
  3. Данные, полученные с помощью «Fetch», имеют формат «String», тогда как «Axios» извлекает данные непосредственно в «JSON ». Хотя в зависимости от варианта использования, данные в формате «String» могут быть более полезными, чем в формате «JSON». Но для большинства случаев использования получение данных непосредственно в формате JSON всегда является преимуществом. Я думаю, здесь «Axios» имеет преимущество перед «Fetch» ​​.

Примечание. Вы также можете получить json с помощью «Fetch», но это двухэтапный процесс.

Таким образом, этот раунд переходит к «Axios», однако это в основном зависит от ваших предпочтений.

Fetch: +1, Axios: +1

Третий раунд: множественные запросы

В мире SPA (одностраничное приложение) нам необходимо выполнять множество одновременных запросов. Однако одновременный вызов нескольких HTTP-запросов не ограничивается только миром SPA.

Axios

Как сделать несколько HTTP-запросов с помощью Axios

Получить

Теперь давайте посмотрим, как это сделать с помощью «Fetch».

  1. «Axios» использует «Axios.all» для выполнения нескольких запросов, тогда как «Fetch» использует «Promise.all ». «Axios» также использует функцию «Axios.spread» для получения ответа, тогда как «Fetch» не требует каких-либо дополнительных функций.
  2. «Fetch» должен использовать «async / await» для одновременного выполнения асинхронных вызовов, а «Axios» позаботится об этом самостоятельно.

В этом раунде нет явного победителя. Однако, по моему мнению, я хотел бы встать на сторону «Axios», поскольку он не имеет отношения к «async / await», и вы также получать данные прямо в формате «JSON». Таким образом, ни один из них не получает баллов.

Fetch: +1, Axios: +1

Четвертый раунд: поддержка браузера

Вы можете подумать, что как только я создам свое веб-приложение, оно будет без проблем работать в Интернете в каждом из браузеров моего клиента. Однако вашим клиентом может быть кто угодно, от малыша до ветерана Второй мировой войны, по крайней мере, в случае версии браузера. Нас могут обмануть, заставив думать, что каждый из нас работает над последней версией браузера, но «Реальность часто разочаровывает».

«Axios» легко побеждает в этом раунде, поскольку даже старые браузеры, такие как IE11, могут без проблем запускать «Axios». Однако «Fetch» поддерживает только Chrome 42+, Firefox 39+, Edge 14+ и Safari 10.1+, если не упомянуть одну из основных. Из этого мы легко можем видеть, что «Axios» имеет лучшую обратную поддержку браузеров. Таким образом, этот раунд переходит к «Axios».

Fetch: +1, Axios: +2

Пятый раунд: HTTP-перехватчики

Прежде чем говорить о том, кто лучше в этом отношении, давайте посмотрим, что такое перехватчики.

Перехватчики позволяют нам перехватывать входящие или исходящие HTTP-запросы с помощью HttpClient. Перехватывая HTTP-запрос, мы можем изменить или изменить значение запроса.

В этом сценарии также явным победителем является «Axios», поскольку он обеспечивает простой и легкий способ использования перехватчиков HTTP, тогда как «Fetch» не предоставляет способ сделать это по умолчанию. Давайте посмотрим, как мы это делаем в «Axios».

В этом примере метод «axios.interceptors.request.use ()» определяет код, который будет выполняться перед отправкой HTTP-запроса. В основном он используется для «аутентификации», «ведения журнала» и «обработки данных».

Fetch: +1, Axios: +3

Шестой раунд: размер связки

Несложно сделать вывод, что Axios добавит некоторую дополнительную зависимость, поскольку это сторонняя библиотека, тогда как Fetch в значительной степени встроен. Распакованный размер библиотеки Axios составляет 371 КБ (источник: https://www.npmjs.com/package/axios )

Fetch: +2, Axios: +3

Финальный раунд: безопасность

Мне не нужно объяснять важность безопасности в современном цифровом мире. Давайте рассмотрим сценарий угрозы безопасности, с которой мы можем столкнуться в реальной жизни.

Предположим, вы находитесь на своем компьютере и входите в свою учетную запись в социальной сети, в которой ваш компьютер получает токен сеанса. Затем вы получаете электронное письмо от хакера, искусно замаскированное, как будто оно отправлено с официальной платформы социальных сетей. В электронном письме содержится ссылка, если вы нажмете на ссылку, которая соединяется с вашей учетной записью в социальной сети, с которой вы ранее вошли в систему, используя токен сеанса, который вы получили от платформы, используя сеанс браузера. Дамы и господа, вот как нас взломали!

А вот и наш спаситель XSRF (подделка межсайтовых запросов). Поскольку «Axios» имеет встроенную защиту XSRF, он обеспечивает лучшую защиту по сравнению с «Fetch». Как работает XSRF, выходит за рамки этой статьи (не будьте такими жадными).

Таким образом, этот раунд также идет в «Axios».

Fetch: +2, Axios: +4

Вывод

Не каждый сценарий имеет одинаковый вес для всех и каждого случая.

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

Однако, как мы видим, они сравниваются бок о бок. «Axios» определенно предоставляется вместо «Fetch» в большинстве сценариев. Поэтому победитель этой смертельной битвы -

Спасибо, что прочитали эту статью 😎