面试官：你了解axios的原理吗？有看过它的源码吗？

Axios使用、简易实现与源码分析

原创

已于 2024-08-29 21:07:29 修改 · 1.2k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-08-29 21:06:38 首次发布

一、axios的使用

关于axios的基本使用，上篇文章已经有所涉及，这里再稍微回顾下：

发送请求

import axios from 'axios';

axios(config) // 直接传入配置
axios(url[, config]) // 传入url和配置
axios[method](url[, option]) // 直接调用请求方式方法，传入url和配置
axios[method](url[, data[, option]]) // 直接调用请求方式方法，传入data、url和配置
axios.request(option) // 调用 request 方法

const axiosInstance = axios.create(config)
// axiosInstance 也具有以上 axios 的能力

axios.all([axiosInstance1, axiosInstance2]).then(axios.spread(response1, response2))
// 调用 all 和传入 spread 回调

请求拦截器

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);
});

取消请求

// 方式一
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('xxxx', {
   
   
  cancelToken: source.token
})
// 取消请求 (请求原因是可选的)
source.cancel('主动取消请求');

// 方式二
const CancelToken = axios.CancelToken;
let cancel;

axios.get('xxxx', {
   
   
  cancelToken: new CancelToken(function executor(c) {
   
   
    cancel = c;
  })
});
cancel('主动取消请求');

二、实现一个简易版axios

构建一个Axios构造函数，核心代码为request

class Axios {
   
   
    constructor() {
   
   

    }

    request(config) {
   
   
        return new Promise(resolve => {
   
   
            const {
   
   url = '', method = 'get', data = {
   
   }} = config;
            // 发送ajax请求
            const xhr = new XMLHttpRequest();
            xhr.open(method, url, true);
            xhr.onload = function() {
   
   
                console.log(xhr.responseText)
                resolve(xhr.responseText);
            }
            xhr.send(data);
        })
    }
}

导出axios实例

// 最终导出axios的方法，即实例的request方法
function CreateAxiosFn() {
   
   
    let axios = new Axios();
    let req = axios.request.bind(axios);
    return req;
}

// 得到最后的全局变量axios
let axios = CreateAxiosFn();

上述就已经能够实现axios({ })这种方式的请求

下面是来实现下axios.method()这种形式的请求

// 定义get,post...方法，挂在到Axios原型上
const methodsArr = ['get', 'delete', 'head', 'options', 'put', 'patch', 'post'];
methodsArr.forEach(met => {
   
   
    Axios.prototype[met] = function() {
   
   
        console.log('执行'+met+'方法');
        // 处理单个方法
        if (['get', 'delete', 'head', 'options'].includes(met)) {
   
    // 2个参数(url[, config])
            return this.request({
   
   
                method: met,
                url: arguments[0],
                ...arguments[1] || {
   
   }
            })
        }