当前位置：首页 > news >正文

axios 模拟实现

news 来源：原创 2025/8/16 14:16:57

axios 模拟实现

包含[发送请求,拦截器,取消请求]

第一步 , axios模拟发送请求

            //使用 xhr 发送请求function xhr_adpter(config){return new Promise(function handle(resolve,reject){let xhr = new XMLHttpRequest();xhr.open(config.method, config.url,true);xhr.onreadystatechange = function(){if(4 === xhr.readyState){// 成功, 携带对应数据if(xhr.status >= 200 && xhr.status < 300){resolve({config,data:xhr.response,status:xhr.status,headers:xhr.getAllResponseHeaders(),request:xhr});return;}elsereject({data:xhr.response,status : xhr.status});}}//只考虑Get情况xhr.send();});}// 使用http还是xhr,这里省略http发送请求function dispatch_req(config){/*判断使用 http or xhr这里只模拟xhr*/return xhr_adpter(config).then(res=>{// 对响应结果做转化,这里省略转化过程,直接返回结果return res;},error=>{throw error;})} // 模拟实现,暂不使用function Axios(config){this.config = config;}// 请求函数Axios.prototype.request = function(config){let promise = Promise.resolve(config);//为下面的拦截器做铺垫let callbacks = [dispatch_req, null] ;return  promise.then(callbacks[0],callbacks[1]);}// 仅模拟let context = new Axios({});//绑定上下文, axios() 相当于 request()let axios = Axios.prototype.request.bind(context);let new_promise = axios({method:"GET",url:"http://127.0.0.1/get_axios"});new_promise.then(res=>{console.log("get :", res);                },error=>{console.log("error:",error)});

第二步,拦截器模拟

添加拦截器函数

	 //拦截器function Interceptor(){this.handlers = [];}Interceptor.prototype.use = function(success=null, fail=null){this.handlers.push({success,fail});}

构造函数新增拦截器

		function Axios(config){this.config = config;//新增拦截器this.interceptors = {request: new Interceptor(),response : new Interceptor()};}

新增初始化函数

	function prepare(){let context = new Axios({});//绑定上下文, axios() 相当于 request()let axios = Axios.prototype.request.bind(context);//增加拦截器引用属性到axios, 以方便使用Object.keys(context).forEach(key=>{axios[key] = context[key];});return axios;}

修改请求函数

 // 请求函数Axios.prototype.request = function(config){let promise = Promise.resolve(config);// 保存所有回调,包含拦截器, 形成then回调let callbacks = [dispatch_req, null] ;/*把拦截器加入数组把请求拦截器 放入数组前端把响应拦截器 放入数组后面整个数组像这样:[请求拦截success回调,请求拦截fail回调, dispatch_req,null, 响应拦截success,响应拦截fail] */while(this.interceptors.request.handlers.length > 0){let handler = this.interceptors.request.handlers.shift();callbacks.unshift(handler.success, handler.fail);}while(this.interceptors.response.handlers.length > 0){let handler = this.interceptors.response.handlers.shift();callbacks.push(handler.success, handler.fail)}// 为数组回调生成所有promise对象while(callbacks.length > 0){let success = callbacks.shift();let fail = callbacks.shift();promise = promise.then(success,fail);}return promise;}

拦截器完整代码

			//拦截器function Interceptor(){this.handlers = [];}Interceptor.prototype.use = function(success=null, fail=null){this.handlers.push({success,fail});}//使用 xhr 发送请求function xhr_adpter(config){return new Promise(function handle(resolve,reject){let xhr = new XMLHttpRequest();xhr.open(config.method, config.url,true);xhr.onreadystatechange = function(){if(4 === xhr.readyState){// 成功, 携带对应数据if(xhr.status >= 200 && xhr.status < 300){resolve({config,data:xhr.response,status:xhr.status,headers:xhr.getAllResponseHeaders(),request:xhr});return;}elsereject({data:xhr.response,status : xhr.status});}}//只考虑Get情况xhr.send();});}function dispatch_req(config){/*判断使用 http or xhr*/return xhr_adpter(config).then(res=>{// 对响应结果做转化,这里省略转化过程,直接返回结果return res;},error=>{throw error;})}   function Axios(config){this.config = config;//新增拦截器this.interceptors = {request: new Interceptor(),response : new Interceptor()};}// 请求函数Axios.prototype.request = function(config){let promise = Promise.resolve(config);// 保存所有回调,包含拦截器, 形成then回调let callbacks = [dispatch_req, null] ;/*把拦截器加入数组把请求拦截器 放入数组前端把响应拦截器 放入数组后面整个数组像这样:[请求拦截success回调,请求拦截fail回调, dispatch_req,null, 响应拦截success,响应拦截fail] */while(this.interceptors.request.handlers.length > 0){let handler = this.interceptors.request.handlers.shift();callbacks.unshift(handler.success, handler.fail);}while(this.interceptors.response.handlers.length > 0){let handler = this.interceptors.response.handlers.shift();callbacks.push(handler.success, handler.fail)}// 为数组回调生成所有promise对象while(callbacks.length > 0){let success = callbacks.shift();let fail = callbacks.shift();promise = promise.then(success,fail);}return promise;}// 初始化函数function prepare(){let context = new Axios({});//绑定上下文, axios() 相当于 request()let axios = Axios.prototype.request.bind(context);//增加拦截器引用属性到axios, 以方便使用Object.keys(context).forEach(key=>{axios[key] = context[key];});return axios;}axios = prepare();axios.interceptors.request.use(config=>{console.log("请求1",config)return config;},error=>{});axios.interceptors.request.use(config=>{console.log("请求2",config)return config;},error=>{});axios.interceptors.response.use(res=>{console.log("响应1");return res;});axios.interceptors.response.use(res=>{console.log("响应2");return res;});let new_promise = axios({method:"GET",url:"http://127.0.0.1/get_axios"});new_promise.then(res=>{console.log("get :", res);                },error=>{console.log("error:",error)});

添加取消请求

代码较为简单,只贴出新增代码

	 		//取消请求function AbortSignal(){// 此promise的状态由外部调用let resolve_func;this.promise = new Promise(resolve=>{resolve_func = resolve;});//添加abort函数,外部可直接调用this.abort = resolve_func;}

在xhr发送请求的代码中添加取消请求的处理

//使用 xhr 发送请求function xhr_adpter(config){return new Promise(function handle(resolve,reject){let xhr = new XMLHttpRequest();xhr.open(config.method, config.url,true);// 若配置对象中有signal属性if(config.signal){config.signal.promise.then(res=>{xhr.abort();});}/*以下代码不变*/});}

			//创建一个取消请求的对象let abort_signal = new AbortSignal();let new_promise = axios({method:"GET",url:"http://127.0.0.1/get_axios",signal: abort_signal	//新增部分});new_promise.then(res=>{console.log("get :", res);                },error=>{console.log("error:",error)});setTimeout(() => {abort_signal.abort();}, 1000);

axios 模拟实现

axios 模拟实现包含[发送请求,拦截器,取消请求] 第一步 , axios模拟发送请求 //使用 xhr 发送请求function xhr_adpter(config){return new Promise(function handle(resolve,reject){let xhr new XMLHttpRequest();xhr.open(config.method, config.url,true);xhr.onreadys…...

编程日记 2025/8/16 14:16:57

架构师面试（三十一）：IM 消息收发逻辑

问题今天聊一下 IM 系统最核心的业务逻辑。在上一篇短文《架构师面试（三十）：IM 分层架构》中详细分析过，IM 水平分层架构包括：【入口网关层】、【业务逻辑层】、【路由层】和【数据访问层】；除此之外&a…...

编程日记 2025/8/16 4:27:42

hadoop三大组件的结构及各自的作用

1 HDFS 1.1功能 HDFS 是 Hadoop 的分布式文件系统，用于存储和管理海量数据。它具有高容错性、高吞吐量和可扩展性，能够在多个节点上存储和管理大规模数据 1.2架构：采用主从架构，由一个 NameNode 和多个 DataNode 组成。NameNode…...

编程日记 2025/8/5 15:48:37

GEE学习笔记 29：基于GEE的多源Landsat合成与植被指数时序提取

基于GEE的多源Landsat合成与植被指数时序提取 🌿 1.写在前面 | 基于GEE的Landsat多尺度植被指数提取脚本📌 2.常用植被指数计算公式2.1. 🌿 NDVI（归一化植被指数）Normalized Difference Vegetation Index2.2. 🌱 EVI（增强型植被指数）Enhanced Vegetation Index2.3.…...

编程日记 2025/8/16 9:42:31

负载均衡的策略

目的：将请求均衡分发到后台的服务器算法： 随机算法：随机数获取服务器加权随机算法：根据权重，增加某些服务器（性能比较好等）选择的随机比例轮询算法：轮流分发给服务器加权轮询算法…...

编程日记 2025/8/15 13:33:02

AWS Elastic Beanstalk的部署Python Flask后端服务（Hello，World）

问题最近需要使用AWS Elastic Beanstalk来部署Python的Flask后端web接口。这里先做一个最简单的Flask Hello，World接口服务程序。 Flask工程与代码创建本地虚拟环境 conda create -n flask python3.13 # 激活 conda activate flaskapp.py from flask import …...

编程日记 2025/8/11 5:22:30

Hadoop的三大结构及各自的作用？

1.HDFS 作用： 存储海量数据，支持高容错（数据自动备份）和高吞吐量（适合大文件读写）。采用主从架构： NameNode：管理文件系统的元数据（如文件目录结构）。 Dat…...

编程日记 2025/8/15 2:00:39

在Ubuntu系统中安装和升级RabbitVCS

在Ubuntu系统中安装和升级RabbitVCS 目前在ubuntu中使用svn的GUI工具，已经安装了。想升级一下。当前遇到的问题是，我想用它看看我当前的代码对应的版本号，然后再决定是否update。但是，好像我看不出来。根本不如在windows使用To…...

编程日记 2025/8/15 11:23:38

深入理解红黑树：原理、实现与应用

深入理解红黑树：原理、实现与应用引言红黑树（Red-Black Tree）是计算机科学中一种重要的自平衡二叉查找树。它通过简单的规则和高效的调整策略，保证了插入、删除、查找等操作的时间复杂度均为 O(log n)。红黑树广泛应用于实际开…...

编程日记 2025/8/15 13:31:10

Java学习手册：Java并发编程最佳实践

在Java并发编程中，遵循最佳实践可以显著提高程序的性能、可靠性和可维护性。本文将总结Java并发编程中的关键最佳实践，帮助开发者避免常见陷阱并编写高效的并发程序。 1. 选择合适的并发工具 Java提供了丰富的并发工具，选择合适的工具可以简…...

编程日记 2025/8/13 5:07:43

接口自动化测试(二)

一、接口测试流程：接口文档、用例编写拿到接口文档——编写接口用例以及评审——进行接口测试——工具/自动化框架进行自动化用例覆盖(70%)——输出测试报告自动化的目的一般是为了回归第一件事情：理解需求，学会看接口文档只需要找到我…...

编程日记 2025/8/12 1:48:47

C++类和对象上

1. 面向对象编程与面向过程编程的比较我们一开始接触的C语言就是一门面向过程编程的语言，而C就是一门面向对象编程的语言。那么这两者有什么区别呢？ 举个例子，就比如说点外卖，如果是C语言的话，那么在程序的编写过程…...

编程日记 2025/8/15 23:35:31

hadoop的三大结构及各自的作用

Hadoop 分布式文件系统（HDFS） 存储大量数据：HDFS 被设计用于在商品硬件上存储海量数据，它将大文件分割成多个数据块，并分布存储在集群中的不同节点上，支持数据的可靠存储和高效访问。提供数据冗余和容错机制…...

编程日记 2025/8/15 2:00:36

珈和科技遥感赋能农业保险创新入选省级卫星应用示范标杆

为促进空天信息与数字经济深度融合，拓展卫星数据应用场景价值，提升卫星数据应用效能和用户体验，加速卫星遥感技术向民生领域转化应用，近日，湖北省国防科工办组织开展了2024年湖北省卫星应用示范项目遴选工作。经多渠…...

编程日记 2025/8/11 6:51:10

香港服务器CPU对比：Intel E3与E5系列核心区别与使用场景

香港服务器的 CPU 配置(核心数与主频)直接决定了其并发处理能力和数据运算效率，例如高频多核处理器可显著提升多线程任务响应速度。在实际业务场景中，不同负载需求对 CPU 架构的要求存在显著差异——以 Intel E3 和 E5 系列为例，由于两者在性…...

编程日记 2025/8/16 11:29:02

【人工智能】DeepSeek 与 RAG 技术：构建知识增强型问答系统的实战

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界本文深入探讨了如何利用 DeepSeek R1 模型结合检索增强生成（RAG）技术，构建一个高效的知识增强型问答系统。RAG 技术通过结合信息检索与生…...

编程日记 2025/8/12 11:39:04

得佳胜哲讯科技 SAP项目启动会：胶带智造新起点数字转型新征程

在全球制造业加速向数字化、智能化转型的浪潮中，胶带制造行业正迎来以“自动化生产、数据化运营、智能化决策”为核心的新变革。工业互联网、大数据分析与智能装备的深度融合，正推动胶带制造从传统生产模式向“柔性化生产精准质量控制全链路追溯”的智慧…...

编程日记 2025/8/16 4:34:48

超导体的应用价值：超导磁探测技术开启科技与生活的新变革

科技的飞速发展，带来了一种新型材料的快速应用，那就是超导体材料。超导体的特性，能够为当今社会众多领域带来革命性的变革，也将极大的改变我们现在的生活质量。超导体的特性超导体是指在特定温度下的电阻会突然消失&#xff0c…...

编程日记 2025/8/14 6:47:03

UNION和UNION ALL的主要区别

UNION和UNION ALL的主要区别在于处理重复数据和排序的方式。 UNION和UNION ALL都是SQL语言中用于合并两个或多个SELECT语句结果集的关键字。它们的主要区别如下： 1、对重复结果的处理：UNION在进行表链接后会筛选掉重复的记录，而UNION ALL不会…...

编程日记 2025/8/16 5:35:20

软件项目验收报告模板

软件项目验收报告一、项目基本信息项目名称XX智能仓储管理系统开发单位XX科技有限公司验收单位XX物流集团合同签订日期2023年3月15日项目启动日期2023年4月1日验收日期2024年1月20日二、验收范围入库管理模块（包含RFID识别、库存预警）出库调度模…...

编程日记 2025/8/14 8:54:30

第五章 SQLite数据库：5、SQLite 进阶用法：JOIN、UNION、TRIGGER、INDEX、ALIAS、INDEXED BY 等模块

一、JOIN：跨表查询的核心机制 1. JOIN 类型总览 JOIN 是连接多个表获取综合信息的关键手段。常见 JOIN 类型如下： INNER JOIN（内连接）：仅返回两个表中满足连接条件的行。LEFT OUTER JOIN（左连接&#xf…...

编程日记 2025/8/12 11:56:06

中间件--ClickHouse-10--海量数据存储如何抉择ClickHouse和ES？

在Mysql数据存储或性能瓶颈时，采用冷热数据分离的方式通常是一种选择。ClickHouse和Elasticsearch（ES）是两个常用的组件，但具体使用哪种组件取决于冷数据的存储目的、查询模式和业务需求等方面。 1、核心对比 （1&…...

编程日记 2025/8/10 17:28:50

JESD204B标准及其在高速AD采集系统中的应用详解

一、JESD204B协议的本质与核心价值 JESD204B是由JEDEC制定的第三代高速串行接口标准（2011年发布），专为解决高速ADC/DAC与FPGA/ASIC间数据传输瓶颈而设计。其核心突破体现在： 速率革命性提升支持每通道最高12.5Gbps（通…...

编程日记 2025/8/14 1:12:48

给予FLUX更好的控制：FLUX.1-dev-ControlNet-Union-Pro-2.0

Shakker Labs FLUX.1-dev-ControlNet-Union-Pro-2.0 一、模型概述 Shakker Labs发布的FLUX.1-dev-ControlNet-Union-Pro-2.0是一个统一的ControlNet模型，专为FLUX.1-dev模型设计。该模型在前一版本基础上进行了多项改进，包括移除模式嵌入以减小模型尺寸…...

编程日记 2025/8/12 22:53:28

Hadoop的三大结构及其作用？

Hadoop是一个分布式存储和计算框架，其三大核心组件是HDFS（Hadoop Distributed File System）、YARN（Yet Another Resource Negotiator）和MapReduce。它们各自有着重要的作用，共同构成了Hadoop生态系统的基础…...

编程日记 2025/8/13 13:57:20

langgraph框架之初识

1.什么是langgraph？ LangGraph 是一个用于构建可控代理的底层编排框架。在AI中，代理也就是执行动作的智能体，也就是agent。使用这个框架可以构建一个可以自由控制的智能执行体，它可以帮我们做许多事情，如下&#xff1…...

编程日记 2025/8/16 1:29:30

3个实用的脚本

1. Linux 系统清理临时文件脚本该脚本用于清理系统中 /tmp 目录下超过 7 天的临时文件。 #!/bin/bash# 清理 /tmp 目录下超过 7 天的文件 find /tmp -type f -atime 7 -exec rm -f {} \;# 清理 /var/tmp 目录下超过 7 天的文件 find /var/tmp -type f -atime 7 -exec rm -f {…...

编程日记 2025/8/15 8:08:16

Vue3 Composition API与十大组件开发案例详解

文章目录一、Vue3核心API解析1.1 Composition API优势1.2 核心API 二、十大组件开发案例案例1：响应式表单组件案例2：动态模态框（Teleport应用）案例3：可复用列表组件案例4：全局状态通知组件案例5&#xff1…...

编程日记 2025/8/13 17:53:38

万用表判断MOS好坏

无论什么封装，D极一般在正面看的上面，或者焊盘面积最大的一面： 【零】烧个洞的那种，不用量了，一眼损坏【一】万用表的二极管档位测量检修：使用万用表的二极管档位，S极接红表笔，黑…...

编程日记 2025/8/8 20:38:05

算法驱动光场革命：SLM技术引领智能光学新时代

◀背景引入▶ 空间光调制器本质上是一种能够对光波的振幅、相位或偏振状态进行空间分布调制的动态光学器件，我司自主研发的SLM产品采用硅基液晶技术，通过电信号控制液晶分子的排列状态，实现对入射光波的精确调控。这种精确调控能力使得SLM成…...

编程日记 2025/8/16 7:36:04

webgl入门实例-11WebGL 视图矩阵 (View Matrix)基本概念

WebGL 视图矩阵 (View Matrix) 在WebGL中，视图矩阵(View Matrix)定义了观察者(相机)在世界空间中的位置和方向，它实现了从世界坐标系到相机坐标系的转换。什么是视图矩阵？ 视图矩阵是一个4x4的矩阵，用于： 将场景从…...

编程日记 2025/8/5 16:54:41

ESP32 搭建IDF+Vscode环境（详细教程）

1. IDF环境安装 1.1 ESP-IDF介绍 ESP-IDF (Espressif IoT Development Framework) 是 Espressif( 乐鑫) 公司提供的面向ESP32 系列的官方开源开发框架，用于开发物联网应用。ESP-IDF 的特点是高度的集成性和可移植性，提供了完整的 SDK，…...

编程日记 2025/8/13 14:24:43

精准计量+AI管控——安科瑞助力高校水电管理数字化转型

安科瑞顾强传统管理痛点：效率低、隐患多、成本高高校后勤水电管理长期面临多重挑战：人工抄表需宿管逐层逐户记录，耗时耗力且易出现漏抄、错抄，导致费用核算不公；老旧机械式电表误差率高达5%-10%，计量纠…...

编程日记 2025/8/11 5:47:10

PHP腾讯云人脸核身获取SIGN Ticket

参考腾讯云官方文档：人脸核身获取 SIGN ticket_腾讯云前提条件：已经获取了access_token。获取方法可参考： PHP腾讯云人脸核身获取Access Token-CSDN博客 public function getSignTicket(){$access_token file_get_contents(/data/confi…...

编程日记 2025/8/12 22:24:25

探索 Higress：下一代云原生 API 网关

引言在云原生时代，API 网关作为连接客户端与后端服务的桥梁，扮演着至关重要的角色。Higress 是一款由阿里巴巴开发的先进云原生 API 网关，基于开源的 Istio 和 Envoy 构建。它通过将流量网关、微服务网关和安全网关三者高度集成&#xff0c…...

编程日记 2025/8/14 20:43:48

UE5编辑器静止状态下（非 Play 模式）睫毛和眼睛的渲染是正常的，而在 Play 模式下出现模糊

这通常指向以下几个运行时（Runtime） 特有的原因： 抗锯齿 (Anti-Aliasing) 方法，特别是 Temporal Anti-Aliasing (TAA): 这是最可能的原因。 UE5 默认启用的 TAA 通过混合多帧信息来平滑边缘和减少闪烁，尤其是在运动中…...

编程日记 2025/8/7 9:31:16

ubuntu-24.04.2-live-server-arm64基于cloud-init实现分区自动扩容（LVM分区模式）

1. 环境虚拟机镜像ISO：ubuntu-24.04.2-live-server-arm64.iso 2. 定制cloud-init镜像 2.1 安装OS 基于ubuntu-24.04.2-live-server-arm64.iso，通过virt-manager安装操作系统，语言建议选择英文，分区选择基于LVM的自动分区&…...

编程日记 2025/8/14 23:03:57

解决 Spring Boot 多数据源环境下事务管理器冲突问题（非Neo4j请求标记了 @Transactional 尝试启动Neo4j的事务管理器）

0. 写在前面到底遇到了什么问题？ 简洁版： 在 Oracle 与 Neo4j 共存的多数据源项目中，一个仅涉及 Oracle 操作的请求，却因为 Neo4j 连接失败而报错。根本原因是 Spring 的默认事务管理器错误地指向了 Neo4j，导致不相…...

编程日记 2025/8/10 1:38:00

直线轴承在自动化机械设备中的应用

直线轴承作为机械传动系统中的关键部件，凭借其高精度、低摩擦和稳定性能，被广泛应用于各类自动化设备中。以下是直线轴承在自动化领域的典型应用场景： CNC机床在数控机床的进给系统中，直线轴承与精密导轨配合使用，为刀…...

编程日记 2025/8/11 10:28:12

生物化学笔记：医学免疫学原理22 肿瘤及肿瘤治疗

肿瘤及肿瘤治疗免疫疗法 CAR-T细胞介绍...

编程日记 2025/8/16 6:07:37

6.数据手册解读—运算放大器（二）

目录 6、细节描述 6.1预览 6.2功能框图 6.3 特征描述 6.3.1输入保护 6.3.1 EMI抑制 6.3.3 温度保护 6.3.4 容性负载和稳定性 6.3.5 共模电压范围 6.3.6反相保护 6.3.7 电气过载 6.3.8 过载恢复 6.3.9 典型规格与分布 6.3.9 散热焊盘的封装 6.3.11 Shutdown 6.4…...

编程日记 2025/8/11 13:23:56

010数论——算法备赛

数论模运算一般求余都是对正整数的操作，如果对负数，不同编程语言结果可能不同。 C/javapythona>m,0<a%m<m-1 a<m,a%ma~5%32~-5%3 -21(-5)%(-3) -2~5%(-3)2-1正数：（ab）%m((a%m)(b%m))%m~正数&#xff…...

编程日记 2025/8/14 1:25:39

算法01-最小生成树prim算法

最小生成树prim算法题源：代码随想录卡哥的题链接：https://kamacoder.com/problempage.php?pid1053 时间：2025-04-18 难度：4⭐ 题目： 1. 题目描述： 在世界的某个区域，有一些分散的神秘岛屿&…...

编程日记 2025/8/14 16:22:53

轻量化高精度的视频语义分割

Video semantic segmentation (VSS)视频语义分割 Compact Models（紧凑模型）在深度学习中，相对于传统模型具有更小尺寸和更少参数数量的模型。这些模型的设计旨在在保持合理性能的同时，减少模型的计算和存储成本。紧凑模型的设计可以涉及以下一些技术：深度剪枝（Deep…...

编程日记 2025/8/12 17:32:45