axios源码分析与模拟（上）

axios源码分析与模拟（上）

axios对象创建过程模拟实现

//构造函数function Axios(config){//初始化this.defaults=config;//为了创建default默认属性this.intercepers={request:{},response:{}}}//原型添加相关的方法Axios.prototype.request=function(config){console.log("发送ajax请求 请求的类型为 "+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) {//实例化一个对象let context=new Axios(config);//context.get() context.post() 但是不能当作函数使用 context()//创建请求函数let instance=Axios.prototype.request.bind(context);//instance是一个函数，并且可以instance({}) 此时不能instance.get()//将Axios.prototype 对象中的方法添加大instance函数对象中Object.keys(Axios.prototype).forEach(key=>{instance[key]=Axios.prototype[key].bind(context);//this.default this.interceptors});console.dir(instance);//为instance函数对象添加属性 default与interceptorsObject.keys(context).forEach(key=>{console.log(key);instance[key]=context[key];});return instance;}let axios=createInstance({method:'GET'});//发送请求 axios既可以做函数也可以做对象axios({method:'GET'});axios({method:'POST'});axios.get({});axios.post({});

这段代码模拟了 Axios 库的基本结构，并展示了如何使用 createInstance 函数来创建一个可用于发送请求的 Axios 实例。

  1. Axios 构造函数
function Axios(config){// 初始化this.defaults = config;  // 用于创建默认配置this.intercepers = {request: {},response: {}};
}

Axios 构造函数:
function Axios(config) 定义了 Axios 构造函数，用于初始化 Axios 实例。
this.defaults = config; 将传入的配置 config 存储在 defaults 属性中，作为默认配置。
this.interceptors = { request: {}, response: {} }; 初始化 interceptors 属性，用于存储请求拦截器和响应拦截器。

  1. Axios 原型方法
Axios.prototype.request = function(config){console.log("发送ajax请求 请求的类型为 " + config.method);
}
Axios.prototype.get = function(config){return this.request({method: 'GET'});
}
Axios.prototype.post = function(config){return this.request({method: 'POST'});
}

request 方法接受一个 config 对象，并输出请求的类型。
get 方法调用 request 方法，并指定 method 为 ‘GET’。
post 方法调用 request 方法，并指定 method 为 ‘POST’。

  1. createInstance 函数
function createInstance(config) {// 实例化一个对象let context = new Axios(config);// 创建请求函数let instance = Axios.prototype.request.bind(context);// 将Axios.prototype对象中的方法添加到instance函数对象中Object.keys(Axios.prototype).forEach(key => {instance[key] = Axios.prototype[key].bind(context);});console.dir(instance);// 为instance函数对象添加属性 default与interceptorsObject.keys(context).forEach(key => {console.log(key);instance[key] = context[key];});return instance;
}

createInstance 函数接受一个 config 参数并创建一个 Axios 对象 context。
创建一个绑定到 context 的 request 方法，并命名为 instance。这样 instance 就是一个函数，可以用来发送请求。
将 Axios.prototype 上的所有方法绑定到 instance 上，这样 instance 也可以调用 get 和 post 方法。
将 context 的所有属性（如 defaults 和 intercepers）也添加到 instance 上。
最后返回 instance。

  1. 使用 createInstance 函数创建 axios 实例
let axios = createInstance({method: 'GET'});
// 发送请求 axios 既可以做函数也可以做对象
axios({method: 'GET'});
axios({method: 'POST'});
axios.get({});
axios.post({});

axios 是通过 createInstance 创建的实例。
axios 可以像函数一样调用，例如 axios({method: ‘GET’})，这将调用 request 方法并输出请求类型。
axios 也可以像对象一样调用 get 和 post 方法，这些方法同样会调用 request 方法并输出请求类型。

模拟实现axios请求发送功能

//axios发送请求 axios Axios.prototype.request bind//1.声明构造函数function Axios(config){this.config=config;}Axios.prototype.request=function(config){//发送请求//创建一个promise对象let promise=Promise.resolve(config);//声明一个数组let chains=[dispatchRequest,undefined];//undefined占位//调用then方法指定回调let result=promise.then(chains[0],chains[1]);/**等价于* let result=promise.then(function dispatchRequest(config){console.log('dispatchRequest函数');},chains[1]);*///返回promise的结果return result;}//2.dispatchRequest函数function dispatchRequest(config){//调用适配器发送请求return xhrAdapter(config).then(res=>{//响应的结果进行转换处理//...return res;},error=>{throw error;})}//3.adapter适配器function xhrAdapter(config){//发送AJAX请求return new Promise((resolve,reject)=>{//实例化对象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);axios({method:'GET',url:'http://localhost:3000/posts',}).then(res=>{console.log(res);})
  1. Axios 构造函数
function Axios(config){this.config = config;
}

Axios 是一个构造函数，它接受一个 config 对象并将其赋值给实例的 config 属性。

  1. Axios.prototype.request 方法
Axios.prototype.request = function(config){// 创建一个promise对象let promise = Promise.resolve(config);// 声明一个数组let chains = [dispatchRequest, undefined]; // undefined 占位// 调用then方法指定回调let result = promise.then(chains[0], chains[1]);// 返回promise的结果return result;
}

request 方法接收一个 config 对象，并返回一个 Promise 对象。
它首先创建一个 resolved 状态的 Promise，传入 config 作为值。
声明一个包含 dispatchRequest 函数和 undefined 的数组 chains。
使用 then 方法为 Promise 指定成功和失败的回调函数，并返回处理后的 Promise。

  1. dispatchRequest 函数
function dispatchRequest(config){// 调用适配器发送请求return xhrAdapter(config).then(res => {// 响应的结果进行转换处理// ...return res;}, error => {throw error;});
}

dispatchRequest 函数接收 config 对象，并调用 xhrAdapter 发送请求。
处理请求成功和失败的结果，返回一个 Promise。

  1. xhrAdapter 函数
function xhrAdapter(config){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(), // 字符串// xhr请求对象request: xhr,// 响应状态码status: xhr.status,// 相应状态字符串statusText: xhr.statusText});} else {// 失败的状态reject(new Error('请求失败 失败的状态码为 ' + xhr.status));}}};});
}

xhrAdapter 函数返回一个新的 Promise，用于发送 AJAX 请求。
创建并初始化 XMLHttpRequest 对象 xhr，设置请求方法和 URL。
绑定 onreadystatechange 事件处理函数，当请求完成时检查响应状态：
成功时调用 resolve，传入响应数据。
失败时调用 reject，传入错误信息。

  1. 创建 axios 函数
let axios = Axios.prototype.request.bind(null);
axios({method: 'GET',url: 'http://localhost:3000/posts',
}).then(res => {console.log(res);
});

axios 是通过绑定 Axios.prototype.request 方法创建的，这样 axios 函数就可以直接调用 request 方法。
调用 axios 函数发送一个 GET 请求到 http://localhost:3000/posts。
使用 then 方法处理响应结果，输出响应数据。
总结
这段代码实现了一个简化版的 axios，核心流程如下：
创建一个 Axios 实例。
通过 axios 函数调用 request 方法，返回一个 Promise。
request 方法调用 dispatchRequest 函数。
dispatchRequest 函数调用 xhrAdapter 函数，发送 AJAX 请求。
xhrAdapter 函数处理请求的结果，并返回一个 Promise。
axios 函数调用 then 方法处理最终的响应结果。

模拟axios拦截器的实现

//构造函数function Axios(config){this.config=config;this.interceptors={request:new InterceptorManager(),response:new InterceptorManager(),}}//发送请求Axios.prototype.request=function(config){//创建一个promise对象let promise=Promise.resolve(config);//创建一个数组const chains=[dispatchRequest,undefined];//处理拦截器//请求拦截器 将请求拦截器的回调 压入到chains的前面 request.handles=[]this.interceptors.request.handlers.forEach(item=>{chains.unshift(item.fulfilled,item.rejected);})//响应拦截器this.interceptors.response.handlers.forEach(item=>{chains.push(item.fulfilled,item.rejected);})//遍历while(chains.length>0){promise=promise.then(chains.shift(),chains.shift())}//返回一个promise队形return promise;}//发送请求function dispatchRequest(config){//返回一个promise队形return new Promise((resolve,reject)=>{resolve({status:200,statusText:'OK',})})}//创建实例let context=new Axios({});//创造axios函数let axios=Axios.prototype.request.bind(context);//将context属性config interceptors属性添加到axios函数对象上Object.keys(context).forEach(key=>{axios[key]=context[key];})//拦截器管理器构造函数function InterceptorManager(){this.handlers=[];}InterceptorManager.prototype.use=function(fulfilled,rejected){this.handlers.push({fulfilled,rejected})}//以下为功能测试代码//设置请求拦截器1 config 配置对象axios.interceptors.request.use(function(config){console.log("请求拦截器 success--1号");//修改config中的参数config.params={a:100};return config;// throw "抛出失败，返回失败的promise"},function(error){console.log("请求拦截器 fail--1号");return Promise.reject(error);})//设置请求拦截器2axios.interceptors.request.use(function(config){console.log("请求拦截器 success--2号");//修改 config中的参数config.timeout=2000;return config;// throw "抛出失败，返回失败的promise"},function(error){console.log("请求拦截器 fail--2号");return Promise.reject(error);})//设置响应拦截器1axios.interceptors.response.use(function(response){console.log("响应拦截器 成功--1号");return response.data;},function(error){console.log("响应拦截器 失败--1号");return Promise.reject(error);})//设置响应拦截器2axios.interceptors.response.use(function(response){console.log("响应拦截器 成功--2号");return response;},function(error){console.log("响应拦截器 失败--2号");return Promise.reject(error);})console.dir(axios);axios({method:'GET',url:'http://localhost:3000/posts',}).then(res=>{console.log(res);})

这段代码实现了一个简化版的 Axios 库，带有请求和响应拦截器功能。下面是对代码的详细解释：

  1. Axios 构造函数
function Axios(config) {this.config = config;this.interceptors = {request: new InterceptorManager(),response: new InterceptorManager(),};
}

Axios 构造函数初始化了一个 config 配置对象，并创建了 interceptors 对象，其中包含 request 和 response 两个拦截器管理器。

  1. Axios.prototype.request 方法
Axios.prototype.request = function(config) {let promise = Promise.resolve(config);const chains = [dispatchRequest, undefined];this.interceptors.request.handlers.forEach(item => {chains.unshift(item.fulfilled, item.rejected);});this.interceptors.response.handlers.forEach(item => {chains.push(item.fulfilled, item.rejected);});while (chains.length > 0) {promise = promise.then(chains.shift(), chains.shift());}return promise;
};

request 方法用于发送请求。
promise 先初始化为传入的 config 对象。
chains 数组用于存放拦截器的处理函数。
将请求拦截器的处理函数添加到 chains 的前面，将响应拦截器的处理函数添加到 chains 的后面。
遍历 chains 数组，并依次调用 then 方法，形成拦截器链。
返回最终的 promise 对象。

  1. dispatchRequest 函数
function dispatchRequest(config) {return new Promise((resolve, reject) => {resolve({status: 200,statusText: 'OK',});});
}

dispatchRequest 函数模拟发送请求，直接返回一个 resolved 的 Promise 对象，表示请求成功。

  1. 创建 Axios 实例
let context = new Axios({});
let axios = Axios.prototype.request.bind(context);
Object.keys(context).forEach(key => {axios[key] = context[key];
});

创建一个 Axios 实例 context。
使用 bind 方法将 request 方法绑定到 context，形成 axios 函数。
将 context 的属性（如 config 和 interceptors）复制到 axios 函数对象上。

  1. InterceptorManager 构造函数和 use 方法
function InterceptorManager() {this.handlers = [];
}
InterceptorManager.prototype.use = function(fulfilled, rejected) {this.handlers.push({ fulfilled, rejected });
}

InterceptorManager 用于管理拦截器。
use 方法用于添加拦截器，handlers 数组存放拦截器的处理函数。

  1. 添加拦截器
axios.interceptors.request.use(function(config) {console.log("请求拦截器 success--1号");config.params = { a: 100 };return config;
}, function(error) {console.log("请求拦截器 fail--1号");return Promise.reject(error);
});axios.interceptors.request.use(function(config) {console.log("请求拦截器 success--2号");config.timeout = 2000;return config;
}, function(error) {console.log("请求拦截器 fail--2号");return Promise.reject(error);
});axios.interceptors.response.use(function(response) {console.log("响应拦截器 成功--1号");return response.data;
}, 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);
});

代码添加了多个请求和响应拦截器。
每个拦截器都有成功和失败的回调函数。

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

最后使用 axios 函数发送一个 GET 请求，并处理响应结果。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/47883.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

苏州金龙海格汽车入选2024中国汽车行业可持续发展实践案例

苏州金龙海格汽车入选2024中国汽车行业可持续发展实践案例

2024年7月11日-13日&#xff0c;由中国汽车工业协会主办的第14届中国汽车论坛在上海嘉定举办。本届论坛隆重发布了“2024中国汽车行业可持续发展实践案例”&#xff0c;苏州金龙因在坚持绿色可持续发展方面做出的努力和贡献获评2024中国汽车行业可持续发展实践案例“绿色发展”…
阅读更多...
【P2P_BMA_P2MP_NBMA】

【P2P_BMA_P2MP_NBMA】

基本概念介绍 1. BMA&#xff08;Broadcast&#xff09; 广播型多路访问技术&#xff0c;在一个MA&#xff08;多路访问&#xff0c;在一个网段内的节点数量不限制。&#xff09;网络中同时存在广播机制。 特点&#xff1a; 允许将数据包广播到网络上的所有主机。路由器之间…
阅读更多...
【AI大模型Agent探索】深入探索实践 Qwen-Agent 的 Function Calling

【AI大模型Agent探索】深入探索实践 Qwen-Agent 的 Function Calling

系列篇章&#x1f4a5; No.文章1【Qwen部署实战】探索Qwen-7B-Chat&#xff1a;阿里云大型语言模型的对话实践2【Qwen2部署实战】Qwen2初体验&#xff1a;用Transformers打造智能聊天机器人3【Qwen2部署实战】探索Qwen2-7B&#xff1a;通过FastApi框架实现API的部署与调用4【Q…
阅读更多...
kubernetes学习日志（六）

kubernetes学习日志（六）

前言 本文记录了存储卷管理、临时卷、持久卷、PV/PVC管理 一、持久卷 卷概述 容器化带来的问题 容器中的文件在磁盘上是临时存放的&#xff0c;这对于容器运行重要应用程序带来一些问题 1、容器崩溃重启时&#xff0c;kubelet会以纯净&#xff08;镜像&#xff09;状态重启…
阅读更多...
PyTorch 深度学习实践-卷积神经网络基础篇

PyTorch 深度学习实践-卷积神经网络基础篇

视频指路 参考博客笔记 参考笔记二 文章目录 上课笔记代码实现作业实现 上课笔记 如果一个网络全都是由线性层串联起来&#xff08;torch.nn.Linear(xx, yy)&#xff09;&#xff0c;就叫他全连接的网络(左边节点到右边节点任意两个都存在权重) 先看一下吴恩达或者李宏毅老师…
阅读更多...
QT通用配置文件库(QPreferences)

QT通用配置文件库(QPreferences)

QT通用配置文件库(QPreferences) QPreferences项目是基于nlohmann/json的qt可视化配置文件库&#xff0c;将配置保存成json格式&#xff0c;并提供UI查看与修改&#xff0c;可通过cmake可快速添加进项目。默认支持基本类型、stl常用容器、基本类型与stl容器组成的结构体&#…
阅读更多...
【Git标签管理】理解标签 | 创建标签 | 查看标签 | 删除标签 | 推送标签

【Git标签管理】理解标签 | 创建标签 | 查看标签 | 删除标签 | 推送标签

目录 1.理解标签 2.创建标签 3.查看标签 4.删除本地仓库的标签 5.推送标签 6.删除远程仓库的标签 1.理解标签 Git提供一个打标签的功能tag&#xff0c;对某一次事务/提交的表示&#xff08;作用/意义&#xff09;。标签 tag &#xff0c;可以简单的理解为是对某次 comm…
阅读更多...
Java(二十二)---队列

Java(二十二)---队列

文章目录 前言1.队列(Queue)的概念2.Queue的使用3.队列的模拟实现4.循环队列5.双端队列6.面试题[1. 用队列实现栈](https://leetcode.cn/problems/implement-stack-using-queues/description/)[2. 用栈实现队列](https://leetcode.cn/problems/implement-queue-using-stacks/de…
阅读更多...
人工智能导论-机器学习

人工智能导论-机器学习

机器学习概述 概述 本章主要介绍的机器学习的概念、发展历程、发展趋势、相关应用&#xff0c;着重拓展机监督学习和无监督学习的相关知识。 重点&#xff1a;机器学习的定义和应用&#xff1b; 难点&#xff1a;机器学习算法及分类。 机器学习 - 重要性 MachineLeaning出…
阅读更多...
力扣第十六题——最接近的三数之和

力扣第十六题——最接近的三数之和

内容介绍 给你一个长度为 n 的整数数组 nums 和 一个目标值 target。请你从 nums 中选出三个整数&#xff0c;使它们的和与 target 最接近。 返回这三个数的和。 假定每组输入只存在恰好一个解。 示例 1&#xff1a; 输入&#xff1a;nums [-1,2,1,-4], target 1 输出&#x…
阅读更多...
＜数据集＞钢板缺陷检测数据集＜目标检测＞

＜数据集＞钢板缺陷检测数据集＜目标检测＞

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;1986张 标注数量(xml文件个数)&#xff1a;1986 标注数量(txt文件个数)&#xff1a;1986 标注类别数&#xff1a;7 标注类别名称&#xff1a;[crescent gap, silk spot, water spot, weld line, oil spot, punchin…
阅读更多...
算法面试题五

算法面试题五

深度学习中的优化算法&#xff1a;请列举并解释几种常用的深度学习优化算法&#xff08;如Adam、SGD等&#xff09; 深度学习中的优化算法是训练神经网络时用于最小化或最大化某个函数&#xff08;通常是损失函数或目标函数&#xff09;的重要工具。这些算法通过迭代更新模型的…
阅读更多...
工业圆点定位激光器主要应用场景有哪些?

工业圆点定位激光器主要应用场景有哪些?

在现代工业生产的各个领域&#xff0c;精确定位和高效操作已成为提升生产效率和产品质量的关键。其中&#xff0c;工业圆点定位激光器以其高精度、高效率的特性&#xff0c;成为了众多工业应用中的核心工具。接下来我们就跟着鑫优威一起来深入了解一下关于工业圆点定位激光器的…
阅读更多...
抖音/快手/小红书私信卡片在线制作

抖音/快手/小红书私信卡片在线制作

W外链平台&#xff0c;作为现代网络营销领域的一颗璀璨明星&#xff0c;其强大的功能和独特的优势已经吸引了无数企业和个人的目光。在如今这个信息爆炸的时代&#xff0c;如何有效地将自己的网站、产品、服务推广出去&#xff0c;成为了每个营销人员都在思考的问题。而W外链平…
阅读更多...
CentOS 7报错：yum命令报错 “ Cannot find a valid baseurl for repo: base/7/x86_6 ”

CentOS 7报错：yum命令报错 “ Cannot find a valid baseurl for repo: base/7/x86_6 ”

参考连接&#xff1a; 【linux】CentOS 7报错&#xff1a;yum命令报错 “ Cannot find a valid baseurl for repo: base/7/x86_6 ”_centos linux yum search ifconfig cannot find a val-CSDN博客 Centos7出现问题Cannot find a valid baseurl for repo: base/7/x86_64&…
阅读更多...
uniapp 微信默认地图选点功能实现

uniapp 微信默认地图选点功能实现

效果图 配置项 微信公众平台-小程序配置 uniapp配置 上代码 <template><view class"content"><button click"toMap">请选择位置</button></view> </template><script setup lang"ts">function toMa…
阅读更多...
Flink HA

Flink HA

目录 Flink HA集群规划 环境变量配置 masters配置 flink-conf.yaml配置 测试 Flink HA集群规划 FLink HA集群规划如下&#xff1a; IP地址主机名称Flink角色ZooKeeper角色192.168.128.111bigdata111masterQuorumPeerMain192.168.128.112bigdata112worker、masterQuorumPee…
阅读更多...
Leetcode1929. 数组串联

Leetcode1929. 数组串联

问题描述&#xff1a; 给你一个长度为 n 的整数数组 nums 。请你构建一个长度为 2n 的答案数组 ans &#xff0c;数组下标 从 0 开始计数 &#xff0c;对于所有 0 < i < n 的 i &#xff0c;满足下述所有要求&#xff1a; ans[i] nums[i]ans[i n] nums[i] 具体而言…
阅读更多...
Unity 导入MRTK，使用URP 升级材质，MRTK的材质还是洋红色

Unity 导入MRTK，使用URP 升级材质，MRTK的材质还是洋红色

控制台显示信息 ToggleBackground material was not upgraded. There’s no upgrader to convert Mixed Reality Toolkit/Standard shader to selected pipeline UnityEditor.Rendering.Universal.UniversalRenderPipelineMaterialUpgrader:UpgradeProjectMaterials() (at 点击…
阅读更多...
观察者模式实战：Spring Boot中联动更新机制的优雅实现

观察者模式实战：Spring Boot中联动更新机制的优雅实现

引言 在许多应用系统中&#xff0c;我们经常需要处理多个表之间的关联更新问题。例如&#xff0c;在教育管理系统中&#xff0c;当学生的基本信息表中的年龄字段发生更改时&#xff0c;我们可能还需要同步更新学生档案表和学生成绩表中的相关信息。本文将通过一个具体的案例&a…
阅读更多...
最新文章

Copyright @ 2022~2023