Недовольство AJAX, Axios и Fetch

JavaScript
Недовольство AJAX, Axios и Fetch

предисловие

Быстрое развитие интерфейса в последние несколько лет заставило людей кричать, что они действительно не могут учиться. Методы взаимодействия с интерфейсом и сервером также были значительно обновлены. Три наиболее часто используемых метода взаимодействия — это ajax, axios и fetch. Различия между ними часто находятся в центре внимания интервью. Далее мы поговорим о них.

Ajax

Ajax — это «асинхронный Javascript и XML» (асинхронный JavaScript и XML), который относится к технологии веб-разработки для создания интерактивных, быстрых и динамических веб-приложений, которые могут обновлять некоторые веб-страницы без перезагрузки всей веб-страницы, широко известной как локальное обновление. .

Ядром Ajax является приложение объекта XMLHttpRequest, посредством которого возможен обмен данными с веб-сервером без перезагрузки страницы, то есть эффект частичного обновления может быть произведен без обновления страницы.

При использовании нативного JS инкапсуляция AJAX часто является головной болью, а в эпоху, когда Promise еще не появился, callback-функция случайно показывает вам, что это за адский уровень.

С появлением Jquery AJAX также стал проще, и Jquery инкапсулирует AJAX внутри.

$.ajax({
  type: "POST",
  url: url,
  data: data,
  dataType: dataType,
  success: function () {},
  error: function () {},
});

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

Axios

Axios — это метод, предоставляемый третьей стороной.Как и AJAX, он инкапсулирует объект XMLHttpRequest и добавляет метод Promise для решения проблемы ада обратного вызова, предоставляя большое количество API, которые можно использовать.

axios({
  method: "post",
  url: url,
  data: data,
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Axios может широко использоваться, в основном имеет следующие характеристики:

  1. Поддерживает как узел, так и браузер
  2. Обещает поддержку
  3. Богатые элементы конфигурации
  4. поддержка сообщества
  5. Поддержка клиентов для предотвращения CSRF

Fetch

Fetch - это альтернатива нативному объекту XMLHTTREQUESEST, он более низкий уровень, поэтому он более интригует использовать.

Он также обернут промисами, но отличается от Axios:

  1. При получении кода состояния HTTP, представляющего ошибку, обещание, возвращенное из fetch(), не будет помечено как отклоненное, даже если код состояния ответа HTTP равен 404 или 500. Вместо этого он пометит статус обещания как разрешение (но установит для свойства ok возвращаемого значения разрешения значение false ) и пометит его как отклонение только в случае сбоя сети или блокировки запроса.
  2. fetch не отправляет куки. Если вы не используете параметр инициализации учетных данных. (По состоянию на 25 августа 2017 г. политика учетных данных по умолчанию была изменена на тот же источник.)
  3. fetch() может принимать файлы cookie из разных источников; вы также можете использовать fetch() для установления сеанса из разных источников.
fetch(url)
  .then(function (response) {
    return response.json();
  })
  .then(function (myJson) {
    console.log(myJson);
  });

Самая большая разница между Fetch и Axios заключается в том, что Fetch сначала возвращает HTTP-ответ вместо реального JSON. Чтобы получить содержимое JSON, нам нужно использовать метод json().

Сравнивая эти три, я все же считаю, что Axios лучше.

послесловие

Я думаю, все в порядке, я могу поставить вам лайк, когда у меня возникнут проблемы с уходом, и давайте учиться и обсуждать вместе! Вы также можете следить за моим блогом и надеяться поставить мне звезду на моем github.Друзья обязательно найдут проблему.Почти все мои имена пользователей связаны с помидорами, потому что я очень люблю есть помидоры ❤️! ! ! Парень, который хочет следить за машиной, не заблудившись, тоже надеется обратить внимание на паблик-аккаунт.Передний конец старый помидор. После подписки я вытащу вас в продвинутую группу, где все смогут общаться и учиться вместе, а также вы сможете получить бесплатные материалы! ! ! Я учусь в начальной школе в мире программирования. Ваша поддержка является движущей силой для меня, чтобы продолжать двигаться вперед. 😄 Я надеюсь, что смогу двигаться вперед вместе.

Категории