В чем разница между набирающим популярность сетевым запросом Fetch и Axios

JavaScript

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

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

да, на самом делеУ Fetch почти нет преимуществ перед Axios (кроме нативной поддержки браузера), Axios проще в использовании, чем Fetch во всех аспектах. Fetch необходимо вручную инкапсулировать некоторые функции Axios.

Я перехватил карту запросов нескольких относительно крупных сайтов:

Самородки:

image-20210226191506400

YouTube:

image-20210226191538119

Знаю почти:

image-20210226191628939

нужно знать, это:Axios — это инкапсуляция XMLHttpRequest, а Fetch — новый метод интерфейса для получения ресурсов, а не инкапсуляция XMLHttpRequest.

OниСамая большая разница заключается в том, что Fetch изначально поддерживается браузером, в то время как Axios необходимо представить библиотеку Axios.

1. ЖИЗНЬЯ

Хотя провести интуитивное сравнение невозможно, мы можем видеть по количеству загрузок пакетов npm:

image-20210226192158770

Поскольку Fetch по умолчанию не поддерживается в среде Node, его необходимо использовать.node-fetchЭтот пакет и еженедельный объем загрузки этого пакета росли, и можно увидеть, что он достиг более 20 миллионов загрузок в неделю. Это только в среде Node, браузер поддерживает по умолчанию и не требует сторонних пакетов.

image-20210226192350038

Выше показан объем загрузки Axios, и видно, что он также постоянно растет Различные методы упаковки Axios действительно просты в использовании.

В этой статье мы сосредоточимся на следующих сравнениях:

  • совместимость
  • Основной синтаксис
  • Время ответа истекло
  • преобразование данных
  • HTTP-перехватчик
  • запрос одновременно

2. Проблемы совместимости

Axios совместим с браузером IE, иFetch не поддерживается в Internet Explorer и некоторых старых браузерах., но есть библиотека, которая позволяет старым браузерам поддерживать Fetch, т.е.whatwg-fetch, он позволяет использовать Fetch в более старых версиях браузеров, и теперь многие разработчики веб-сайтов предпочитают не поддерживать совместимость с браузерами IE, чтобы снизить затраты.

Примечание. В старых браузерах также могут потребоваться библиотеки совместимости Promise.

Совместимость различных браузеров с Fetch:

image-20210227000214141

3. Метод запроса

Давайте посмотрим, как использовать Axios и Fetch для выполнения запросов.

Аксиос:

const options = {
  url: "http://example.com/",
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  data: {
    a: 10,
    b: 20,
  },
};

axios(options).then((response) => {
  console.log(response.status);
});

Принести:

const url = "http://example.com/";
const options = {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  body: JSON.stringify({
    a: 10,
    b: 20,
  }),
};

fetch(url, options).then((response) => {
  console.log(response.status);
});

Самая большая разница в том, чтоРазличные способы передачи данных, Axios находится вdataВ атрибуте он передается как объект, а Fetch нужно поместить вbodyВ атрибуте он передается как строка.

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

Соответствующая настройка тайм-аута Axios очень проста, устанавливается напрямуюtimeoutСо свойствами все в порядке, а настроить Fetch гораздо труднее, чем Axios, что является одной из причин, по которой многие люди предпочитают Axios Fetch.

axios({
  method: "post",
  url: "http://example.com/",
  timeout: 4000, // 请求4秒无响应则会超时
  data: {
    firstName: "David",
    lastName: "Pollock",
  },
})
  .then((response) => {
    /* 处理响应 */
  })
  .catch((error) => console.error("请求超时"));

Fetch предоставляетAbortControllerсвойствами, но не так прост в использовании, как Axios.

const controller = new AbortController();

const options = {
  method: "POST",
  signal: controller.signal,
  body: JSON.stringify({
    firstName: "David",
    lastName: "Pollock",
  }),
};
const promise = fetch("http://example.com/", options);

// 如果4秒钟没有响应则超时
const timeoutId = setTimeout(() => controller.abort(), 4000);

promise
  .then((response) => {
    /* 处理响应 */
  })
  .catch((error) => console.error("请求超时"));

5. Преобразование данных

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

// axios
axios.get("http://example.com/").then(
  (response) => {
    console.log(response.data);
  },
  (error) => {
    console.log(error);
  }
);

// fetch
fetch("http://example.com/")
  .then((response) => response.json()) // 需要对响应数据进行转换
  .then((data) => {
    console.log(data);
  })
  .catch((error) => console.error(error));

API-интерфейсы преобразования, предоставляемые Fetch, следующие:

  • arrayBuffer()
  • blob()
  • json()
  • text()
  • formData()

Когда вы используете Fetch, вам нужно очистить тип данных после запроса, чтобы преобразовать его с помощью соответствующего метода.

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

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

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

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

axios.interceptors.request.use((config) => {
  // 在请求之前对请求参数进行处理
  return config;
});

// 发送GET请求
axios.get("http://example.com/").then((response) => {
  console.log(response.data);
});

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

fetch = ((originalFetch) => {
  return (...arguments) => {
    const result = originalFetch.apply(this, arguments);
    return result.then(console.log("请求已发送"));
  };
})(fetch);

fetch("http://example.com/")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

7. Одновременные запросы

В то же время запрос в проекте используется мало, но иногда может использоваться.

Аксиос:

axios
  .all([
    axios.get("https://api.github.com/users/iliakan"),
    axios.get("https://api.github.com/users/taylorotwell"),
  ])
  .then(
    axios.spread((obj1, obj2) => {
      ...
    })
  );

Принести:

Promise.all([
  fetch("https://api.github.com/users/iliakan"),
  fetch("https://api.github.com/users/taylorotwell"),
])
  .then(async ([res1, res2]) => {
    const a = await res1.json();
    const b = await res2.json();
  })
  .catch((error) => {
    console.log(error);
  });

8. Встроенная поддержка браузера

Единственное, чем Fetch превосходит Axios, — это встроенная поддержка современных браузеров.

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

image-20210227211909726

На приведенном выше рисунке показано, как открыть консоль Chrome в Zhihu, а затем вызвать API личных данных Zhihu, и вы увидите, что данные могут быть успешно получены.

9. Наконец

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

Иногда это неизбежная тенденция постепенного замещения старых технологий новыми технологиями, поэтому однажды Fetch заменит их.XMLHttpRequest, возможно, позже библиотека Axios будет использовать запросы Fetch.

Справочная статья:Axios or fetch(): Which should you use?

Категории