axios源码模拟实现

已于 2022-02-11 16:06:20 修改
阅读量1.6k 收藏 1
点赞数 2
分类专栏： 前端小白 文章标签： 前端 axios
于 2022-02-11 15:07:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43652492/article/details/122855629
版权

一、分析文件结构

  • /dist/ 输出目录，最后输出的axios整体文件
    • axios.js 未压缩的
    • axios.min.js 压缩后的
  • /lib/ 源码目录，所有的源代码都放在这里
    • /adapters/ 请求的适配器
      • http.js 实现http适配器（包装 http包），在 node.js向远程服务器发送请求时使用
      • xhr.js 实现 xhr适配器（包装 xhr对象），在浏览器端发送请求时使用
    • /cancel/ 定义取消功能
      • Cancel.js 构造函数，用来创建取消时的错误对象
      • CancelToken.js取消请求的构造函数
      • isCancel.js 检测参数是否为取消对象
    • /core/ 一些核心功能
      • Axios.js axios的核心主类，文件存放的是 axios的构造函数
      • buildFullPath.js 构建完整 URL 的函数文件
      • createError.js 创建指定信息的 Error 对象
      • dispatchRequest.js 发送请求的函数文件
      • enhanceError.js 更新错误对象的函数文件
      • InterceptorManager.js 拦截器的管理器
      • mergeConfig.js 合并配置的函数文件
      • settle.js 根据 http响应状态，改变Promise 的状态
      • transformData.js 数据格式转化函数
    • /helpers/ 一些功能函数
      • bind.js 返回一个新的函数，并将新函数this绑定到一个对象身上
      • buildURL.js 创建一个 URL，将参数缀到URL 后，并返回格式化后的内容
      • combineURLs.js 合并URL
      • cookies.js 处理cookie
      • deprecatedMethod.js 控制台提示不赞成使用的方法
      • isAbsoluteURL.js 检测是否为绝对路径的 URL
      • isURLSameOrigin.js 检测是否为同源的 URL
      • normalizeHeaderName.js 统一化头信息, 统一变为大写
      • parseHeaders.js 解析将头信息解析为对象
      • spread.js 用于调用函数和扩展参数数组的语法糖
        -axios.js axios入口文件
    • defaults.js axios配置文件
    • utils.js 工具函数文件
  • package.json 包信息
  • index.d.ts 配置 TypeScript的声明文件
  • index.js 整个包的入口文件

二、模拟实现 axios 对象创建过程

  模拟实现 axios 对象创建过程可以看下面代码以及代码注释。

<script>
    // 构造函数
    function Axios(config){
        // 初始化
        this.defaults = config;// 为了创建 default 默认属性
        this.interceptors = {
            request: {},
            response: {}
        }
    }
    // 原型添加相关的方法
    Axios.prototype.request = function(config){
        console.log('发送请求，请求的类型为 '+ config.method);
    }
    Axios.prototype.get = function(config){
        return this.request({method: 'GET'});
    }
    Axios.prototype.post = function(config){
        return this.request({method: 'POST'});
    }

    // 声明函数
    function createInstance(config){
        // 实例化一个对象
        // 可以 context.get() context.post() 这样使用，但是不能当做函数使用，即不能 context() 这样使用
        let context = new Axios(config);
        // 创建请求函数
        // 此时 instance 是一个函数，并且可以调用instance()然后往里面传对象，比如instance({})。 
        // 此时 instance 不能 instance.get 这样使用。
        let instance = Axios.prototype.request.bind(context);
        // 为了可以 instance.get 这样用，将 Axios.prototype 对象中的方法添加到 instance 函数对象中
        // 为了保证函数在调用时 this 一定指向实例对象 context，更加严谨些，加个bind()
        Object.keys(Axios.prototype).forEach(key => {
            instance[key] = Axios.prototype[key].bind(context);
        });
        // 为 instance 这个函数对象添加 default 和 interceptors 属性
        Object.keys(context).forEach(key => {
            instance[key] = context[key];
        });
        return instance;
    }

    let axios = createInstance();
    // 发送请求
    // axios({method:'POST'});
    axios.get({});
    axios.post({});
</script>

三、模拟实现 axios 发送请求的过程

  axios是由Axios.prototype.request这个函数通过bind创建而来的，所以无论是 axios()还是axios.get()、axios.post()等方式，请求的源头都是request。

  模拟实现 axios 发送请求的过程可以看下面代码以及代码注释。

<script>
    // axios 发送请求
    //1. 声明构造函数
    function Axios(config){
        this.config = config;
    }
    Axios.prototype.request = function(config){
        //发送请求
        //源码中在创建前做了合并处理等
        //创建一个 promise 对象，可以看到这个 promise 一定是成功的
        let promise = Promise.resolve(config);
        //声明一个数组
        let chains = [dispatchRequest, undefined];// 这里的 undefined 是一个占位
        //调用 then 方法指定回调
        //这里的 then 方法执行后会执行下面的 dispatchRequest 函数，函数的返回结果是由适配器 xhrAdapter 执行结果决定的。
        //成功时候，这里 result 结果值就是下面的 response
        let result = promise.then(chains[0], chains[1]);
        //返回 promise 的结果
        //这里的 result 就是 request 函数的执行结果，也就是 axios() 的执行结果
        return result;
    }

    //2. dispatchRequest 函数
    function dispatchRequest(config){
        // 可以在这里进行对请求数据进行初始化转化、合并一切其他头信息的配置项等处理（源码中进行了处理）
        //调用适配器发送请求
        return xhrAdapter(config).then(response => {
            //可以在这里对响应的结果进行转换处理（源码中进行了处理）
            //这里的 response 就是 上面的 result 成功时候的结果值。
            return response;
        }, error => {
            throw error;
        });
    }

    //3. adapter 适配器
    function xhrAdapter(config){
        console.log('xhrAdapter 函数执行');
        return new Promise((resolve, reject) => {
            //发送 AJAX 请求
            let xhr = new XMLHttpRequest();
            //初始化
            xhr.open(config.method, config.url);
            //发送
            xhr.send();
            //绑定事件
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    //判断成功的条件
                    if(xhr.status >= 200 && xhr.status < 300){
                        //成功的状态
                        resolve({
                            //配置对象
                            config: config,
                            //响应体
                            data: xhr.response,
                            //响应头
                            headers: xhr.getAllResponseHeaders(), //是一个字符串，源码中是做了格式化，用 parseHeaders 将头信息解析成对象
                            // xhr 请求对象
                            request: xhr,
                            //响应状态码
                            status: xhr.status,
                            //响应状态字符串
                            statusText: xhr.statusText
                        });
                    }else{
                        //失败的状态
                        reject(new Error('请求失败，失败的状态码为' + xhr.status));
                    }
                }
            }
        });
    }


    //4. 创建 axios 函数
    let axios = Axios.prototype.request.bind(null);
    //这里就是最上面 request 函数的执行结果 result
    //然后执行.then 操作
    axios({
        method:'GET',
        url:'http://localhost:3000/posts'
    }).then(response => {
        console.log(response);
    });
</script>

四、模拟实现 axios 拦截器功能

  在我之前的博客一文掌握 axios 基础中提到过一个拦截器顺序的示例，当时执行结果是先执行2号请求拦截器，后执行1号请求拦截器，当时有解释原因。

  原因如下：

  promise在遍历执行时，使用的是数组的shift方法每次从中取出两个函数（成功回调，失败回调）执行。

  而在遍历执行前，我们要先将拦截器的请求回调和响应回调都压入一个数组中，之后再进行遍历运行。

  在向数组中添加 请求拦截器函数 时，根据axios请求的执行顺序，请求拦截器 应该在发送请求之前执行，所以应该添加在 发送请求函数 的前面，因此使用的是数组的unshift方法，即头部添加，故后面添加的 请求拦截器 总是放在头部。

  故 请求拦截器2 先 请求拦截器1 后。

  那么源码中 响应拦截器是使用的什么方法呢？它使用的是数组的push方法。

  在向数组中添加 请求拦截器函数 时，根据axios请求的执行顺序，响应拦截器 应该在发送请求之后执行，所以应该添加在 发送请求函数 的后面，因此使用的是数组的push方法，即尾部添加，故后面添加的 响应拦截器 总是放在尾部。

  故 响应拦截器1 先 响应拦截器2 后。

  现在来模拟实现 axios 拦截器功能，具体可以看下面代码以及代码注释。

  其中创建axios对象和发送请求可以看上面的代码，这里有些简略，只是搭了个框架。

<script>
    //1.构造函数
    function Axios(config){
        this.config = config;
        this.interceptors = {
            request: new InterceptorManager(),
            response: new InterceptorManager(),
        }
    }
    //3.发送请求  难点与重点
    Axios.prototype.request = function(config){
        //源码中在创建前做了合并处理等
        //创建一个 promise 对象
        let promise = Promise.resolve(config);
        //创建一个数组
        const chains = [dispatchRequest, undefined];// 这里的 undefined 是一个占位
        //处理拦截器
        //请求拦截器 
        //将请求拦截器的回调 压入到 chains 的前面
        this.interceptors.request.handlers.forEach(item => {
            chains.unshift(item.fulfilled, item.rejected);
        });
        //响应拦截器
        this.interceptors.response.handlers.forEach(item => {
            chains.push(item.fulfilled, item.rejected);
        });

        // console.log(chains);
        //promise 遍历执行，使用数组的 shift 方法每次从中取出两个函数（成功回调，失败回调）执行
        while(chains.length > 0){
            promise = promise.then(chains.shift(), chains.shift());
        }

        return promise;
    }

    //发送请求
    function dispatchRequest(config){
        //返回一个promise
        return new Promise((resolve, reject) => {
            resolve({
                status: 200,
                statusText: 'OK'
            });
        });
    }

    //2.拦截器管理器构造函数
    function InterceptorManager(){
        this.handlers = [];
    }
    //一旦调用use，就把成功和失败的回调函数做成一个对象压入到 handlers 中
    InterceptorManager.prototype.use = function(fulfilled, rejected){
        this.handlers.push({
            fulfilled,
            rejected
        })
    }

    //4.创建实例
    let context = new Axios({});
    //创建axios函数
    let axios = Axios.prototype.request.bind(context);
    //为 axios 这个函数对象添加 context 的 default 与 interceptors 属性
    Object.keys(context).forEach(key => {
        axios[key] = context[key];
    });


    //5.以下为功能测试代码
    // 设置请求拦截器  config 配置对象
    axios.interceptors.request.use(function one(config) {
        console.log('请求拦截器 成功 - 1号');
        return config;
    }, function one(error) {
        console.log('请求拦截器 失败 - 1号');
        return Promise.reject(error);
    });

    axios.interceptors.request.use(function two(config) {
        console.log('请求拦截器 成功 - 2号');
        return config;
    }, function two(error) {
        console.log('请求拦截器 失败 - 2号');
        return Promise.reject(error);
    });

    // 设置响应拦截器
    axios.interceptors.response.use(function (response) {
        console.log('响应拦截器 成功 1号');
        return response;
    }, function (error) {
        console.log('响应拦截器 失败 1号')
        return Promise.reject(error);
    });

    axios.interceptors.response.use(function (response) {
        console.log('响应拦截器 成功 2号')
        return response;
    }, function (error) {
        console.log('响应拦截器 失败 2号')
        return Promise.reject(error);
    });


    //6.发送请求
    axios({
        method: 'GET',
        url: 'http://localhost:3000/posts'
    }).then(response => {
        console.log(response);
    });
</script>

五、模拟实现 axios 取消请求功能

  现在来模拟实现 axios 取消请求功能，具体可以看下面代码以及代码注释。

  其中创建axios对象和发送请求可以看上面的代码，这里有些简略，只是搭了个框架。

<body>
    <div class="container">
        <h2 class="page-header">axios取消请求</h2>
        <button class="btn btn-primary"> 发送请求 </button>
    </div>
    <script>
        //构造函数
        function Axios(config){
            this.config = config;
        }
        //原型 request 方法
        Axios.prototype.request = function(config){
            return dispatchRequest(config);
        }
        //dispatchRequest 函数
        function dispatchRequest(config){
            return xhrAdapter(config); 
        }
        //xhrAdapter
        function xhrAdapter(config){
            //发送 AJAX 请求
            return new Promise((resolve, reject) => {
                //实例化对象
                const xhr = new XMLHttpRequest();
                //初始化
                xhr.open(config.method, config.url);
                //发送
                xhr.send();
                //处理结果
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        //判断结果
                        if(xhr.status >= 200 && xhr.status < 300){
                            //设置为成功的状态
                            resolve({
                                status: xhr.status,
                                statusText: xhr.statusText
                            });
                        }else{
                            reject(new Error('请求失败'));
                        }
                    }
                }
                //关于取消请求的处理
                if(config.cancelToken){
                    //对 cancelToken 对象身上的 promise 对象指定成功的回调
                    config.cancelToken.promise.then(value => {
                        // 取消请求
                        xhr.abort();
                        //将整体结果设置为失败
                        reject(new Error('请求已经被取消'))
                    });
                }
            })
        }

        // 创建 axios 函数
        const context = new Axios({});
        const axios = Axios.prototype.request.bind(context);

        // CancelToken 构造函数
        function CancelToken(executor){
            // 声明一个变量
            var resolvePromise;
            // 为实例对象添加属性，这个 promise 属性的值是一个 Promise 对象，并且初始是 pedding 状态
            this.promise = new Promise((resolve) => {
                // 将 resolve 赋值给 resolvePromise
                // 这样执行 resolvePromise 函数时，就能更改 promise 原状态
                //这是因为，resolve 和 resolvePromise 都是引用类型，指向的是同一个内存地址，resolvePromise执行，则 resolve 也执行
                resolvePromise = resolve
            });
            // 调用 executor 函数
            executor(function(){
                // 执行 resolvePromise 函数
                resolvePromise();
            });
        }

        // 获取按钮 以上为模拟实现的代码
        const btns = document.querySelectorAll('button');
        //声明全局变量
        let cancel = null;
        //发送请求
        btns[0].onclick = function(){
            //检测上一次的请求是否已经完成
            if(cancel !== null){
                //取消上一次的请求
                cancel();
            }

            //创建 cancelToken 的值
            let cancelToken = new CancelToken(function(c){
                // 此时的 function(c){} 就是上面的CancelToken构造函数里的 executor，
                // 所以此时的 c 就是上面的CancelToken构造函数里的 function(){resolvePromise()}
                // 所以这里的 cancel 其实就是 function(){resolvePromise()}
                // cancel 一旦执行，resolvePromise() 就会执行，CancelToken构造函数里的 promise 属性的状态就会改变
                cancel = c;
            });

            axios({
                method: 'GET',
                url: 'http://localhost:3000/posts',
                //添加配置对象的属性
                cancelToken: cancelToken
            }).then(response => {
                console.log(response);
                //将 cancel 的值初始化
                cancel = null;
            })
        }
    </script>   
</body>

六、axios运行的整体流程

  整体流程：request(config)=> dispatchRequest(config) => xhrAdapter(config)

  • request(config)：将请求拦截器 / dispatchRequest()/ 响应拦截器 通过 promise链串连起来，返回 promise
  • dispatchRequest(config)：转换请求数据 => 调用xhrAdapter()发请求 => 请求返回后转换响应数据，返回promise
  1. xhrAdapter(config)：创建 XHR对象，根据 config进行相应设置，发送特定请求，并接收响应数据，返回 promise

在这里插入图片描述


  至此，axios源码模拟实现就结束了，我是看了尚硅谷的视频进行学习的，感觉模拟实现的代码中核心思想还是有的，不过想要更深入了解最好还是从头认认真真的研究一下源码。

小R.
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
模拟axios
LouYQ0213的博客
09-21 588
axios 一些实现原理
Axios 源码解读 —— 源码实现篇
qq_34621851的博客
01-18 878
在上两期，我们讲解了 Axios 的源码： Axios 源码解读 —— request 篇 Axios 源码解读 —— 网络请求篇 今天，我们将实现一个简易的 Axios，用于在 Node 端实现网络请求，并支持一些基础配置，比如 baseURL、url、请求方法、拦截器、取消请求… 本次实现所有的源码都放在 这里，感兴趣的可以看看。 Axios 实例 本次我们将使用 typescript + node 来实现相关代码，这样对大家理解代码也会比较清晰。 这里，先来实现一个 Axios 类吧。 type
如何实现一个HTTP请求库——axios源码阅读与分析
weixin_34250709的博客
05-05 142
概述 在前端开发过程中，我们经常会遇到需要发送异步请求的情况。而使用一个功能齐全，接口完善的HTTP请求库，能够在很大程度上减少我们的开发成本，提高我们的开发效率。 axios是一个在近些年来非常火的一个HTTP请求库，目前在GitHub中已经拥有了超过40K的star，受到了各位大佬的推荐。 今天，我们就来看下，axios到底是如何设计的，其中又有哪些值得我们学习的地方。我在写这边文章时，axi...
axios实现
lin_fightin的博客
03-05 638
类型定义 import { AxopsInterceptroManager } from './AxiosINterceptoManager' interface AxiosInstace<T = any> { // request方法 (config: AxiosRequestConfig):Promise<AxiosResponse<T>> //T是resolve(v)的v值的定义, interceptors: { re
axios由浅入深(二)源码分析以及模拟实现
weixin_46734347的博客
03-21 189
axios源码分析 axios和Axios的关系？ 从语法上来说axios不是Axios的实例 从功能上说axios是Axios的实例 axios是Axios.request函数bind()返回的函数 axios作为对象有Axios原型对象上所有方法，有Axios对象上所有属性 instance与axios的区别 相同： 都是一个能发任意请求的函数：request(config) 都有发特定请求的方法：get()/post()/put()/delete() 都有默认配置和拦截器的属性：default
基于Pyhon和vue实现智能组卷系统源码+测试数据.zip
05-03
开发者可以利用Vuex管理应用状态，通过axios库进行前后端数据交互，同时结合Vue Router实现页面路由，确保用户操作的流畅性。 在系统设计上，通常采用RESTful API架构，将前后端分离，使得开发更灵活，同时提高系统...
基于Springboot+Vue餐饮管理系统的设计与实现源码案例设计.zip
04-20
【标题】"基于Springboot+Vue餐饮管理系统的设计与实现源码案例设计.zip"是一个综合性的IT项目，旨在提供一个完整的餐饮管理系统开发实例。这个系统利用了现代化的技术栈，结合Spring Boot后端框架和Vue.js前端框架...
大漠模拟yy客户端自动登录源码
06-02
1. **网络请求库**：源码中可能会使用如Python的requests库，JavaScript的axios或Node.js的http模块来发起HTTP/HTTPS请求，模拟用户登录时向服务器发送数据。 2. **数据解析**：登录过程中，可能需要解析服务器返回...
AJAX学习源码.zip
06-18
它通过在后台与服务器进行少量数据交换，使网页实现异步更新。这一技术的核心在于JavaScript，XML则通常用于数据传输，但实际上，JSON和其他格式也被广泛应用。** **一、AJAX的工作原理** 1. **用户触发事件**：...
前端蜘蛛源码
10-24
【前端蜘蛛源码】是一个关于前端爬虫技术的开源项目，其主要目标是实现一个能够模拟用户行为，抓取网页信息的工具。源码提供了从网页中获取数据、解析HTML结构以及模拟网络请求的核心功能。预览链接为 ，但需要注意...
基于Springboot+Vue的火车票订票系统的设计与实现源码案例设计.zip
04-20
2. 集成测试：模拟真实环境，测试系统整体协同工作。 3. Docker容器化部署：利用Docker简化部署流程，实现环境隔离，保证运行一致性。 四、毕业设计价值 此项目适合作为毕业设计，涵盖了Web开发的多个核心领域，对...
仿微信支付生活缴费小程序前端页面源码
最新发布
06-02
3. **网络请求**：uni-app封装了axios或uni.request，用于与后端接口进行数据交互，实现缴费功能的实际逻辑。 4. **微信支付集成**：尽管标题提到“仿微信支付”，实际的支付功能需要接入微信官方的支付SDK，处理...
模拟soapui调用webservice
08-12
在模拟SOAPUI调用Web服务时，开发者通常会使用编程语言的HTTP客户端库，如Java的HttpURLConnection、Python的requests库或者Node.js的axios。这些库允许我们发送POST请求，并设置请求头（包括SOAPAction头）和请求体...
React-Native项目源码
03-14
这个"toilet-master"项目可能是模拟了一个简单的厕所定位或管理应用，为学习者提供了实际操作的机会。 在React Native中，项目的结构通常包括以下几个关键部分： 1. **package.json**：这是项目的核心配置文件，...
vue实现后端管理模板
06-01
4. **API封装与调用**: 通常，后端提供RESTful API，Vue-element-admin通过axios库对这些接口进行统一管理，简化HTTP请求，处理数据响应，实现前后端分离的开发模式。 5. **Element UI组件**: Element UI是一套为...
axios 源码深入分析之 源码实现分析
浮生离梦的博客
06-30 345
一、源码实现分析 axios 源码目录结构，如下所示： ├── /dist/ # 项目输出目录 ├── /lib/ # 项目源码目录 │ ├── /adapters/ # 定义请求的适配器 xhr、http │ │ ├── http.js # 实现http适配器(包装http包) │ │ └── xhr.js # 实现xhr适配器(包
模拟axios过程
t990423909的专栏
08-29 101
【代码】模拟axios过程。
axios超详细源码解析及实现原理
热门推荐
qq_42880714的博客
12-01 1万+
axios超详细源码解析及实现原理
vue3 axios源码
01-18
通过阅读它的源码，我们可以了解到axios是如何与Vue.js的生命周期钩子进行集成，以及如何利用Vue的响应式系统来实现数据的绑定和更新。此外，我们还可以看到axios是如何利用XMLHttpRequest或者Fetch API等浏览器原生...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值