刚出锅的 Axios 网络请求源码阅读笔记

.
├── adapters  // 网络请求，NodeJS 环境使用 NodeJS 的 http 模块，浏览器使用 XHR
│   ├── README.md
│   ├── http.js  // Node.js 环境使用
│   └── xhr.js  // 浏览器环境使用
├── helpers  // 一些功能辅助工具函数，看文件名可基本知道干啥的
│   ├── README.md
│   ├── bind.js
│   ├── buildURL.js
│   ├── combineURLs.js
│   ├── cookies.js
│   ├── deprecatedMethod.js
│   ├── isAbsoluteURL.js
│   ├── isAxiosError.js
│   ├── isURLSameOrigin.js
│   ├── normalizeHeaderName.js
│   ├── parseHeaders.js
│   ├── spread.js
│   └── validator.js
├── cancel  // 取消网络请求的处理
│   ├── Cancel.js  // 取消请求
│   ├── CancelToken.js  // 取消 Token
│   └── isCancel.js  // 判断是否取消请求的函数方法
├── core  // 核心功能
│   ├── Axios.js  // Axios 对象
│   ├── InterceptorManager.js  // 拦截器管理
│   ├── README.md
│   ├── buildFullPath.js  // 构造完成的请求 URL
│   ├── createError.js  // 创建错误，抛出异常
│   ├── dispatchRequest.js  // 请求分发，用于区分调用 http 还是 xhr
│   ├── enhanceError.js  // 增强错误？？？？？？？？？？？？？？？
│   ├── mergeConfig.js  // 合并配置参数
│   ├── settle.js  // 根据请求响应状态，改变 Promise 状态
│   └── transformData.js  // 数据格式转换
├── env  // 无关紧要，没啥用，与发包版本有关
│   ├── README.md
│   └── data.js
├── defaults.js  // 默认参数/初始化参数配置
├── utils.js  // 提供简单的通用的工具函数
└── axios.js  // 入口文件，初始化并导出 axios 对象

// 第一种
axios('https://xxx.com/api/userInfo?uid=1')

// 第二种
axios.get('https://xxx.com/api/userInfo?uid=1')

// 第三种
axios({
  method: 'GET',
  url: 'https://xxx.com/api/userInfo?uid=1'
})

axios(config)
// or
axios(url[, config])

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])

axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

// Provide aliases for supported request methods
utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
  /*eslint func-names:0*/
  Axios.prototype[method] = function(url, config) {
    return this.request(mergeConfig(config || {}, {
      method: method,
      url: url,
      data: (config || {}).data
    }));
  };
});

utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
  /*eslint func-names:0*/
  Axios.prototype[method] = function(url, data, config) {
    return this.request(mergeConfig(config || {}, {
      method: method,
      url: url,
      data: data
    }));
  };
});

Axios.request(config: any, ...args: any[]): any

// 生成规范的 config，抹平 API（函数入参）差异
if (typeof config === 'string') {
  // 处理了第一个参数是 url 字符串的情况 request(url[, config])
  config = arguments[1] || {};
  config.url = arguments[0];
} else {
  config = config || {};
}

// 合并默认配置
config = mergeConfig(this.defaults, config);

// 将请求方法转小写字母，默认为 get 方法
if (config.method) {
  config.method = config.method.toLowerCase();
} else if (this.defaults.method) {
  config.method = this.defaults.method.toLowerCase();
} else {
  config.method = 'get';
}

/**
 * Create an instance of Axios
 *
 * @param {Object} defaultConfig The default config for the instance
 * @return {Axios} A new instance of Axios
 */
function createInstance(defaultConfig) {
  var context = new Axios(defaultConfig);
  var instance = bind(Axios.prototype.request, context);

  // Copy axios.prototype to instance
  utils.extend(instance, Axios.prototype, context);

  // Copy context to instance
  utils.extend(instance, context);

  // Factory for creating new instances
  instance.create = function create(instanceConfig) {
    return createInstance(mergeConfig(defaultConfig, instanceConfig));
  };

  return instance;
}

instance.create = function create(instanceConfig) {
  return createInstance(mergeConfig(defaultConfig, instanceConfig));
};

const axios = require('axios');

const jsonClient = axios.create({
  responseType: 'json' // 该项配置可以在后续创建的实例中复用，而不必重复编码
});

const serviceOne = jsonClient.create({
  baseURL: 'https://service.one/'
});

const serviceTwo = jsonClient.create({
  baseURL: 'https://service.two/'
});

// 根据当前使用环境，选择使用的网络请求适配器
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;
}

// 通过 use 方法，添加一个请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求前干点啥，.then() 处理之前，比如修改 request config
    return config;
  }, function (error) {
    // 在发起请求发生错误后，.catch() 处理之前干点啥
    return Promise.reject(error);
  });

// 通过 use 方法，添加一个响应拦截器
axios.interceptors.response.use(function (response) {
    // 只要响应网络状态码是 2xx 的都会触发
    // 干点啥
    return response;
  }, function (error) {
    // 状态码不是 2xx 的会触发
    // 发生错误了，干点啥
    return Promise.reject(error);
  });

function Axios(instanceConfig) {
  this.defaults = instanceConfig;
  this.interceptors = {
    request: new InterceptorManager(),
    response: new InterceptorManager()
  };
}

// 拦截管理器对象
function InterceptorManager() {
  this.handlers = [];
}

/**
 * 添加新的管理器，定义了 use 方法
 *
 * @param {Function} fulfilled 处理 `Promise` 执行 `then` 的函数方法
 * @param {Function} rejected 处理 `Promise` 执行 `reject` 的函数方法
 *
 * @return {Number} 返回一个 ID 值用于移除拦截器
 */
InterceptorManager.prototype.use = function use(fulfilled, rejected, options) {
  this.handlers.push({
    fulfilled: fulfilled,
    rejected: rejected,
    // 默认不同步
    synchronous: options ? options.synchronous : false,
    // 定义是否执行当前拦截器的函数或布尔值
    runWhen: options ? options.runWhen : null 
  });
  return this.handlers.length - 1; // ID 值实际就是当前拦截器的数组索引
};

/**
 * 从栈中移除指定 id 的拦截器
 *
 * @param {Number} id use 方法返回的 id 值
 */
InterceptorManager.prototype.eject = function eject(id) {
  if (this.handlers[id]) {
    this.handlers[id] = null; // 删除拦截器，但索引会保留
  }
};

/**
 * 迭代所有注册的拦截器
 * 该方法会跳过因拦截器被删除而值为 null 的索引
 *
 * @param {Function} 调用每个有效拦截器的函数
 */
InterceptorManager.prototype.forEach = function forEach(fn) {
  utils.forEach(this.handlers, function forEachHandler(h) {
    if (h !== null) {
      fn(h);
    }
  });
};

/**
 * Dispatch a request
 *
 * @param {Object} config 传入的用户自定义配置，并和默认配置 merge
 */
Axios.prototype.request = function request(config) {
  // 省略 ...

  // 请求拦截器执行链
  var requestInterceptorChain = [];
  // 同步请求拦截器
  var synchronousRequestInterceptors = true;
  // 遍历请求拦截器
  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
    // 判断 runWhen 如果是函数，则执行函数，结果若为 false，则不执行当前拦截器
    if (typeof interceptor.runWhen === 'function' && interceptor.runWhen(config) === false) {
      return;
    }
    // 判断当前拦截器是否同步
    synchronousRequestInterceptors = synchronousRequestInterceptors && interceptor.synchronous;
    // 插入 requestInterceptorChain 数组首位
    // 效果：[interceptor.fulfilled, interceptor.rejected, ...]
    requestInterceptorChain.unshift(interceptor.fulfilled, interceptor.rejected);
  });

  // 响应拦截器执行链
  var responseInterceptorChain = [];
  // 遍历所有的响应拦截器
  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
    // 插入 responseInterceptorChain 尾部
    // 效果：[ ..., interceptor.fulfilled, interceptor.rejected]
    responseInterceptorChain.push(interceptor.fulfilled, interceptor.rejected);
  });

  var promise;

  // 如果非同步
  // 一般大家在使用 axios.interceptors.request.use 都没有传递第三个配置参数
  // 所以一般情况下会走这个逻辑
  if (!synchronousRequestInterceptors) {
    var chain = [dispatchRequest, undefined];
    // 将请求拦截器执行链放到 chain 数组头部
    Array.prototype.unshift.apply(chain, requestInterceptorChain);
    // 将响应拦截器执行链放到 chain 数组末尾
    chain = chain.concat(responseInterceptorChain);
    // 给 promise 赋值 Promise 对象，并注入 request config
    promise = Promise.resolve(config);
    // 循环 chain 数组，组合成 Promise 执行链
    while (chain.length) {
      // 正好 resolve 和 reject 对应方法，两两一组
      promise = promise.then(chain.shift(), chain.shift());
    }
    // 返回 Promise 执行链
    return promise;
  }

  // 同步方式
  var newConfig = config;
  // 循环并执行所有请求拦截器
  while (requestInterceptorChain.length) {
    var onFulfilled = requestInterceptorChain.shift();
    var onRejected = requestInterceptorChain.shift();
    try {
      // 执行定义请求前的“请求拦截器” then 处理方法
      newConfig = onFulfilled(newConfig);
    } catch (error) {
      // 执行定义请求前的“请求拦截器” catch 处理方法
      onRejected(error);
      break;
    }
  }

  try {
    // 执行网络请求
    promise = dispatchRequest(newConfig);
  } catch (error) {
    return Promise.reject(error);
  }

  // 循环并执行所有响应拦截器
  while (responseInterceptorChain.length) {
    promise = promise.then(responseInterceptorChain.shift(), responseInterceptorChain.shift());
  }
  // 返回 Promise 对象
  return promise;
};

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 主动取消请求 (提示信息是可选的参数)
source.cancel('Operation canceled by the user.');

/**
 * Returns an object that contains a new `CancelToken` and a function that, when called,
 * cancels the `CancelToken`.
 */
CancelToken.source = function source() {
  var cancel;
  var token = new CancelToken(function executor(c) {
    cancel = c;
  });
  return {
    token: token,
    cancel: cancel
  };
};

function CancelToken(executor) {
  if (typeof executor !== 'function') {
    throw new TypeError('executor must be a function.');
  }

  // 初始化一个 promise 属性，resolvePromise 变量指向 resolve
  var resolvePromise;
  this.promise = new Promise(function promiseExecutor(resolve) {
    resolvePromise = resolve;
  });

  // 赋值 token 为当前对象的实例
  var token = this;

  // 省略...

  // 执行外部传入的初始化方法，将取消请求的方法，赋值给返回对象的 cancel 属性
  executor(function cancel(message) {
    if (token.reason) {
      // Cancellation has already been requested
      return;
    }

    token.reason = new Cancel(message);
    resolvePromise(token.reason);
  });
}

function throwIfCancellationRequested(config) {
  // 当 request config 中有实例化 cancelToken 时
  // 执行 throwIfRequested() 方法
  // throwIfRequested() 方法在 cancleToken 实例的 reason 字段有值时
  // 抛出异常
  if (config.cancelToken) {
    config.cancelToken.throwIfRequested();
  }
  // 判断 config.signal.aborted 值为真的时候抛出异常
  // 该值时通过 new AbortController().signal，不过目前暂时未用到
  // 官方文档上暂也暂未更新相关内容
  if (config.signal && config.signal.aborted) {
    throw new Cancel('canceled');
  }
}

module.exports = function dispatchRequest(config) {
  // 准备发起请求前检查
  throwIfCancellationRequested(config);
  
  // 省略...
  
  var adapter = config.adapter || defaults.adapter;
  return adapter(config).then(function onAdapterResolution(response) {
    // 请求成功后检查
    throwIfCancellationRequested(config);
    // 省略...
    return response;
  }, function onAdapterRejection(reason) {
    if (!isCancel(reason)) {
      // 请求发生错误时候检查
      throwIfCancellationRequested(config);
      // 省略...
    }
    // 省略...

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

// cookie 中携带的 Token 名称，通过该名称可以从 cookie 中拿到 Token 值
xsrfCookieName: 'XSRF-TOKEN',
// 请求 Header 中携带的 Token 名称，通过该成名可从 Header 中拿到 Token 值
xsrfHeaderName: 'X-XSRF-TOKEN',