解析axios的过程

最新推荐文章于 2024-09-26 16:10:57 发布

Li Derong

最新推荐文章于 2024-09-26 16:10:57 发布

阅读量455

点赞数 1

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/model__/article/details/121022109

版权

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

摘要由CSDN通过智能技术生成

大致思路是这样子的，利用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))