解析axios的过程

最新推荐文章于 2025-03-29 10:53:37 发布

原创

最新推荐文章于 2025-03-29 10:53:37 发布 · 498 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #前端

本文解析了axios的构造函数、createInstance、request函数、InterceptorManger请求拦截和CancelToken取消请求的功能。通过promise链式调用封装ajax，实现请求拦截、响应拦截及请求取消等特性。

大致思路是这样子的，利用promise的链式调用，对ajax进行封装，请求结果通过then方法回传给axios，下面进行了逐步分析，不对的地方还希望大家指出。

准备Axios构造函数

构造函数主要是用来存储配置信息，default：用来存储axios传递的配置信息（如图一），interceptors：进行请求拦截（如图二），get/post/request：发送请求，这里的get/post都是依赖于request方法

function Ajax(){
    this.default = null;
    this.interceptors = {
        request: new InterceptorManger(),
        response: new InterceptorManger()
    }
}
Ajax.prototype.request = function(config){
    this.default = config;
}
Ajax.prototype.get = function(config){
    return Ajax.prototype.request(Object.assign({},{method:'get'},config));
}
Ajax.prototype.post = function(){
    return Ajax.prototype.request(Object.assign({},{method:'post'},config));
}