Асинхронный сетевой запрос xhr, ajax, fetch и сравнение axios

JavaScript

1. Объект XMLHttpRequest

Современные браузеры изначально обмениваются данными с сервером черезXMLHttpRequestобъект. Он может отправлять и получать данные в таких форматах, как JSON, XML, HTML и текст.

if (window.XMLHttpRequest) { // model browser
  xhr = new XMLHttpRequest()
} else if (window.ActiveXObject) { // IE 6 and older
  xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
xhr.open('POST', url, true)
xhr.send(data)
xhr.onreadystatechange = function () {
  try {
    // 处理响应
    if (xhr.readyState === 4) {
      // 请求正常
      if (xhr.status === 200) {
        // 处理响应
      } else {
        // 请求遇到一些问题，处理异常
      }
    } else {
      // 还处于未准备好的状态
    }
  } catch (e) {
    // 通信错误的事件中（例如服务器宕机）
    alert('Caught Exception: ' + e.description)
  }
}

преимущество:

  • Обновите веб-страницу без перезагрузки страницы
  • Запрос/получение данных с сервера после загрузки страницы
  • Отправка данных на сервер в фоновом режиме.

недостаток:

  • Это также громоздко в использовании и требует установки многих значений.
  • Ранние браузеры IE имели собственные реализации, которые требовали написания совместимого кода.

2. jQuery ajax

Чтобы работать с DOM быстрее и избежать некоторых проблем с совместимостью браузера,jQuery. в этомAJAXЗапрос также совместим с различными браузерами, и есть простой и удобный способ$.get,$.post. Проще говоря, даXMLHttpRequestИнкапсуляция объекта.

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

преимущество:

  • к родномуXHRУпаковка совместима, что упрощает использование.
  • добавлен кJSONPsupport, может просто обрабатывать некоторые междоменные.

недостаток:

  • Если есть несколько запросов и есть зависимости, легко сформировать callback hell.
  • Это программирование для самого MVC, что не соответствует текущей волне внешнего интерфейса MVVM.
  • ajax — это метод в jQuery. Очень неразумно импортировать весь jQuery, если вы просто хотите использовать ajax.

3. fetch

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

fetchявляется базовым API, а неXHR, который может легко обрабатывать различные форматы, нетекстовые форматы. могут быть легко использованы другими технологиями, такими какService Workers. Но хочу хорошо использоватьfetch, необходимо выполнить некоторую обработку инкапсуляции.

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

Преимущество: междоменная обработка

В конфигурации добавьте режим: 'no-cors' для междоменного

fetch('/users.json', {
    method: 'post', 
    mode: 'no-cors',
    data: {}
}).then(function() { /* handle response */ });

недостаток:

  • fetchСообщать об ошибках только для сетевых запросов, да400,500Он считается успешным запросом и должен быть инкапсулирован для обработки.
  • fetchне по умолчаниюcookie, необходимо добавить элементы конфигурации.
  • fetchне поддерживаетсяabort, не поддерживает контроль времени ожидания, используйтеsetTimeoutа такжеPromise.rejectВнедрение контроля тайм-аута не препятствует тому, чтобы процесс запроса продолжал работать в фоновом режиме, что приводило к потере трафика.
  • fetchНет возможности изначально отслеживать ход выполнения запроса, иXHRМогу.

осторожность,fetchСпецификация иjQuery.ajax()Имейте в виду, что есть три основных отличия:

  • При получении кода состояния HTTP, представляющего ошибку, отfetch()вернутьPromiseне будет помечен какreject, даже если код состояния ответа HTTP404или500. Вместо этого будетPromiseСтатус отмечен какresolve(но будетresolveвозвращаемое значениеokсвойство установлено наfalse), будет помечен только как сетевой сбой или если запрос заблокированreject.
  • fetch()не принимает междоменныеcookies; вы также не можете использоватьfetch()Устанавливается междоменный сеанс. других сайтовSet-CookieПоля заголовка будут игнорироваться.
  • fetchне будет отправлятьcookies. если вы не используетеcredentialsпараметры инициализации. (С 25 августа 2017 г. по умолчаниюcredentialsПолитика изменена наsame-origin. Firefox также находится в версии 61.0b13, и значение по умолчанию изменено)

4. axios

axiosосновывается наpromiseБиблиотека HTTP, которую можно использовать в браузерах иnode.jsсередина. Это также по своей сутиXMLHttpRequestпакет, за исключением того, чтоPromiseВерсия реализации, соответствующая последней спецификации ES.

Вот официальный случай параллелизма:

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(),getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

axios рекомендован Богом Ю Юйси,

преимущество:

  • Создать из браузераXMLHttpRequests
  • Доступны наnode.jsиспользуется в
  • служба поддержкиPromise API
  • Предоставляет интерфейс для параллельных запросов
  • Перехват запросов и ответов
  • Преобразование данных запроса и данных ответа
  • отменить запрос
  • автоматическое преобразованиеJSONданные
  • Защита поддержки клиентовXSRF

недостаток:

  • Поддерживаются только современные браузеры.

5. Справочная документация

1. XMLHttpRequest

2. jQuery.ajax

3. Использование Fetch — Справочник по интерфейсу веб-API | MDN

4. axios

Категории