Как axios совместим с двумя разными методами запроса
Предисловие
У Axios есть замечательная функция isomorphic
, которая является одной из причин, по которой мне нравится использовать axios в качестве библиотеки запросов для веб-приложений. isomorphic
означает, что код axios может работать в браузере и Node.js.
Все мы знаем, что отправка запросов в браузере зависит от конструктора XMLHttpRequest или Fetch API, а в node.js — от модуля HTTP, предоставляемого node.js. С одной и той же кодовой базой, как axios совместим с двумя разными методами запроса.
Шаги запроса axios
Чтобы ответить на этот вопрос, нам нужно понять шаги запроса axios.
Когда мы отправляем запрос, есть как минимум 7 шагов:
- Запускаем запрос, нам нужно указать URL, параметры и т.д.
- Axios выполнит перехватчик запроса
- Axios преобразует данные запроса, такие как параметры сериализации, добавит заголовки и т. д.
- Axios отправит запрос на сервер с помощью адаптера запроса.
- Axios преобразует данные ответа, например, преобразует JSON.
- Axios выполнит перехватчик ответа.
- Наконец-то мы можем обработать ответ.
Когда мы используем 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 и присоединитесь к нашему Коллективу талантов.