创建过程
导入 Axios 类和默认配置
import Axios from './core/Axios';
import defaults from './defaults';
创建默认 axios 实例
// 使用默认配置创建axios实例
const axios = createInstance(defaults);
创建Axios实例的函数
function createInstance(defaultConfig) {
// 根据默认配置构建个上下文对象,包括默认配置和请求、响应拦截器对象
const context = new Axios(defaultConfig);
// 创建实例 bind 后返回的是一个函数,并且上下文指向context
const instance = bind(Axios.prototype.request, context);
// 拷贝 prototype 到实例上 类似于把 Axios 的原型上的方法(例如: request、get、post...)继承到实例上,this 指向为 context
utils.extend(instance, Axios.prototype, context, {allOwnKeys: true});
// 拷贝上下文对象属性(默认配置和请求、相应拦截器对象)到实例上,this 指向为 context
utils.extend(instance, context, null, {allOwnKeys: true});
// 工厂函数,用来返回创建实例对象的函数。
// 创建 axios 实例,一般对 axios 封装,应该都会用到(我们把一些默认、公共的配置都放到一个实例上,复用实例,无需每次都重新创建实例)
instance.create = function create(instanceConfig) {
return createInstance(mergeConfig(defaultConfig, instanceConfig));
};
return instance;
}
绑定Axios类原型方法
utils.extend(instance, Axios.prototype, context, {allOwnKeys: true});
utils.extend(instance, context, null, {allOwnKeys: true});
导出axios实例
export default axios;
扩展Axios接口
继续在axios对象上扩展create、CancelToken等接口
完整代码如下
'use strict';
import utils from './utils.js';
import bind from './helpers/bind.js';
import Axios from './core/Axios.js';
import mergeConfig from './core/mergeConfig.js';
import defaults from './defaults/index.js';
import formDataToJSON from './helpers/formDataToJSON.js';
import CanceledError from './cancel/CanceledError.js';
import CancelToken from './cancel/CancelToken.js';
import isCancel from './cancel/isCancel.js';
import {VERSION} from './env/data.js';
import toFormData from './helpers/toFormData.js';
import AxiosError from './core/AxiosError.js';
import spread from './helpers/spread.js';
import isAxiosError from './helpers/isAxiosError.js';
import AxiosHeaders from "./core/AxiosHeaders.js";
import adapters from './adapters/adapters.js';
import HttpStatusCode from './helpers/HttpStatusCode.js';
/**
* Create an instance of Axios 创建axios实例的方法
*
* @param {Object} defaultConfig The default config for the instance
*
* @returns {Axios} A new instance of Axios
*/
function createInstance(defaultConfig) {
// 根据默认配置构建个上下文对象,包括默认配置和请求、响应拦截器对象
const context = new Axios(defaultConfig);
// 创建实例 bind后返回的是一个函数,并且上下文指向context
const instance = bind(Axios.prototype.request, context);
// Copy axios.prototype to instance
// 拷贝prototype到实例上 类似于把Axios的原型上的方法(例如: request、get、post...)继承到实例上,this指向为context
utils.extend(instance, Axios.prototype, context, {allOwnKeys: true});
// Copy context to instance
// 拷贝上下文对象属性(默认配置和请求、相应拦截器对象)到实例上,this 指向为 context
utils.extend(instance, context, null, {allOwnKeys: true});
// Factory for creating new instances
// 创建axios实例,一般axios封装 应该都会用到(我们把一些默认、公共的配置都放到一个实例上,复用实例,无需每次都重新创建实例)
instance.create = function create(instanceConfig) {
return createInstance(mergeConfig(defaultConfig, instanceConfig));
};
return instance;
}
// Create the default instance to be exported
// 创建实例 default 为默认配置
const axios = createInstance(defaults);
// Expose Axios class to allow class inheritance
// 向外暴露Axios类,可用于继承
axios.Axios = Axios;
// Expose Cancel & CancelToken
// 这里抛出 中断/取消请求的相关方法到入口对象
axios.CanceledError = CanceledError;
axios.CancelToken = CancelToken;
axios.isCancel = isCancel;
axios.VERSION = VERSION;
axios.toFormData = toFormData;
// Expose AxiosError class
// 用作监测是否为Axios抛出的错误
axios.AxiosError = AxiosError;
// alias for CanceledError for backward compatibility
axios.Cancel = axios.CanceledError;
// Expose all/spread
// 并发请求 完全就是用promise的能力
axios.all = function all(promises) {
return Promise.all(promises);
};
axios.spread = spread;
// Expose isAxiosError
axios.isAxiosError = isAxiosError;
// Expose mergeConfig
axios.mergeConfig = mergeConfig;
axios.AxiosHeaders = AxiosHeaders;
axios.formToJSON = thing => formDataToJSON(utils.isHTMLForm(thing) ? new FormData(thing) : thing);
axios.getAdapter = adapters.getAdapter;
axios.HttpStatusCode = HttpStatusCode;
axios.default = axios;
// this module should only have a default export
export default axios