「源码」axios 三大问题解读

最新推荐文章于 2024-08-13 09:20:06 发布

梅花十三儿

最新推荐文章于 2024-08-13 09:20:06 发布

阅读量676

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Android062005/article/details/124711031

版权

本文深入剖析axios源码，解释其如何区分浏览器与服务器请求，实现请求中断，以及请求和响应拦截的内部机制。通过适配器判断环境，CancelToken或AbortController用于取消请求，InterceptorManager管理请求与响应拦截器的执行流程。

摘要由CSDN通过智能技术生成

前言

究竟对 axios 了解多少？这是我这阵一直想要问的问题！之前一直认为这只是一个工具，只要会用就没问题，但是当被一个问题问住的时候，我觉得应该多了解它了，毕竟这是一个公认的，开源的，牛 X 的第三方工具。

Axios 为什么能区分是浏览器请求还是服务器请求

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 内部封装了一个适配器，判断是否有 XMLHttpRequest，如果存在则调用 xhr，如果不是则判断 process 是否存在，是否为 Node 环境。

可以查看 getDefaultAdapter 函数用在了哪里

var defaults = {

  transitional: transitionalDefaults,

  adapter: getDefaultAdapter(),
  ...
}
module.exports = defaults;

作为默认值输出。

查看 defaults.adapter 用在哪里

**
 * Dispatch a request to the server using the configured adapter.
 *
 * @param {object} config The config that is to be used for the request
 * @returns {Promise} The Promise to be fulfilled
 */
module.exports = function dispatchRequest(config) {
  ...

  var adapter = config.adapter || defaults.adapter;

  return adapter(config).then(function onAdapterResolution(response) {
    throwIfCancellationRequested(config);

    // Transform response data
    response.data = transformData.call(
      config,
      response.data,
      response.headers,
      config.transformResponse
    );

    return response;
  }, function onAdapterRejection(reason) {
    if (!isCancel(reason)) {
      throwIfCancellationRequested(config);

      // Transform response data
      if (reason && reason.response) {
        reason.response.data = transformData.call(
          config,
          reason.response.data,
          reason.response.headers,
          config.transformResponse
        );
      }
    }

    return Promise.reject(reason);
  });
};