深入解析axios原理及源码探究

import axios from 'axios';
// 直接传入配置对象
axios(config);
// 传入URL和配置对象
axios(url[, config]);
// 调用指定请求方式的方法，传入URL和配置
axios[method](url[, option]);
// 调用指定请求方式的方法，传入data、URL和配置
axios[method](url[, data[, option]]);
// 调用request方法
axios.request(option);
// 创建axios实例
const axiosInstance = axios.create(config);
// axiosInstance具有axios的所有能力
// 使用axios.all和axios.spread处理多个请求
axios.all([axiosInstance1, axiosInstance2]).then(axios.spread(response1, response2));

axios.interceptors.request.use(function (config) {
    // 处理发送请求前的逻辑
    return config;
}, function (error) {
    // 处理请求错误的逻辑
    return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
    // 处理响应数据的逻辑
    return response;
}, function (error) {
    // 处理响应错误的逻辑
    return Promise.reject(error);
});

// 方式一：使用CancelToken.source
const { token, cancel } = axios.CancelToken.source();
axios.get('xxxx', { cancelToken: token });
cancel('主动取消请求');
// 方式二：直接使用CancelToken构造函数
const CancelToken = axios.CancelToken;
let cancel;
axios.get('xxxx', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});
cancel('主动取消请求');

class Axios {
    constructor() {
        // 初始化拦截器
        this.interceptors = {
            request: new InterceptorsManage(),
            response: new InterceptorsManage()
        };
    }
    request(config) {
        // 发送请求的核心逻辑
    }
}

class InterceptorsManage {
    constructor() {
        this.handlers = [];
    }
    use(fullfield, rejected) {
        this.handlers.push({ fullfield, rejected });
    }
}

sendAjax(config) {
    return new Promise(resolve => {
        // 发送ajax请求的逻辑
    });
}

request(config) {
    // 拦截器和请求组装队列
    let chain = [this.sendAjax.bind(this), undefined];
    // 添加请求和响应拦截器到队列
    // 执行队列
}

.
├── adapters
├── cancel
├── core
├── helpers
└── xhr

function createInstance(defaultConfig) {
    // 创建实例的逻辑
}
// 导出默认实例
var axios = createInstance(defaults);

function CancelToken(executor) {
    // 取消令牌的逻辑
}