Как axios совместим с двумя разными методами запроса

Предисловие

У Axios есть замечательная функция isomorphic, которая является одной из причин, по которой мне нравится использовать axios в качестве библиотеки запросов для веб-приложений. isomorphic означает, что код axios может работать в браузере и Node.js.

Все мы знаем, что отправка запросов в браузере зависит от конструктора XMLHttpRequest или Fetch API, а в node.js — от модуля HTTP, предоставляемого node.js. С одной и той же кодовой базой, как axios совместим с двумя разными методами запроса.

Шаги запроса axios

Чтобы ответить на этот вопрос, нам нужно понять шаги запроса axios.

Когда мы отправляем запрос, есть как минимум 7 шагов:

  1. Запускаем запрос, нам нужно указать URL, параметры и т.д.
  2. Axios выполнит перехватчик запроса
  3. Axios преобразует данные запроса, такие как параметры сериализации, добавит заголовки и т. д.
  4. Axios отправит запрос на сервер с помощью адаптера запроса.
  5. Axios преобразует данные ответа, например, преобразует JSON.
  6. Axios выполнит перехватчик ответа.
  7. Наконец-то мы можем обработать ответ.

Когда мы используем axios в браузере и node.js, будут разные адаптеры.

Адаптеры axios

Axios использует два адаптера для запросов, браузер использует XMLHttpRequest, а Node.js использует модуль HTTP. Axios определит, какой адаптер использовать, исходя из допустимой среды:

// Code from axios/index.js at bc733fec78326609e751187c9d453cee9bf1993a · axios/axios (github.com)
function getDefaultAdapter() {
  var adapter;
  if (typeof XMLHttpRequest !== 'undefined') {
    // For browsers use XHR adapter
    adapter = require('../adapters/xhr');
  } else if (typeof process !== 'undefined' && Object.prototype.toString.call(process) === '[object process]') {
    // For node use HTTP adapter
    adapter = require('../adapters/http');
  }
  return adapter;
}

Когда мы используем axios в Node.js, поскольку в node.js нет XMLHttpRequest, но есть объект процесса, axios будет использовать адаптер http, который реализован модулем HTTP/HTTPS Node.js.

Когда мы используем axios в браузере, поскольку все браузеры имеют XMLHttpRequest, будет использоваться адаптер xhr.

Если веб-приложение создано с помощью веб-пакета, код будет немного другим. Код после сборки:

// code after webpack's build
function getDefaultAdapter() {
  var adapter;
  if (typeof XMLHttpRequest !== 'undefined') {
    // For browsers use XHR adapter
    adapter = __webpack_require__(448);
  } else if (typeof process !== 'undefined' && Object.prototype.toString.call(process) === '[object process]') {
    // For node use HTTP adapter
    adapter = __webpack_require__(448); // same with XHR
  }
  return adapter;
}

Можно обнаружить, что все адаптеры используют адаптер XHR. Вам интересно, как это делает веб-пакет?

В файле package.json axios настроено поле браузера:

// config from axios https://github.com/axios/axios/blob/bc733fec78326609e751187c9d453cee9bf1993a/package.json#L70
"browser": {    
  "./lib/adapters/http.js": "./lib/adapters/xhr.js",      
  "./lib/defaults/env/FormData.js": "./lib/helpers/null.js"  
}

При использовании веб-пакета для создания веб-приложения информация о конфигурации браузера будет использоваться по умолчанию. Так что адаптер HTTP будет заменен на XHR.

Заключение

В этом посте я объясню, почему axios может работать как в браузере, так и в Node.js. Адаптируйтесь к запросам из разных сред, оценивайте среду браузера в соответствии с XMLHttpRequest и оценивайте среду Node.js с помощью объекта процесса.

Наконец, я надеюсь, что эта статья будет вам полезна. И я с нетерпением жду, когда вы можете подписаться на меня, я поделюсь более практическими статьями.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.