Axios 源码中拦截器的实现

今天构建了一个新项目的架子,想着自己文章里好像没有对Axios源码的文章。今天对其中响应和请求的拦截器的Axios源码记录一下

Axios 的拦截器实现基于 Axios 的核心原理,即 Axios 实例是一个包含请求和响应拦截器堆栈的对象。当发出请求或接收响应时,Axios 会遍历这些拦截器,并按照添加的顺序执行请求拦截器,以及按照相反的顺序执行响应拦截器。
在 Axios 的源码中,拦截器是通过一个 AxiosInterceptorManager 实例来管理的,它维护了一个拦截器数组。每个拦截器都是一个包含 fulfilled 和 rejected 函数的对象。这两个函数分别对应于拦截器成功处理和拦截器处理出错的情况。

这是Axios 拦截器管理器的一个简化版本,核心实现思路:

class InterceptorManager {constructor() {this.handlers = []; // 存储拦截器的数组}use(fulfilled, rejected) {this.handlers.push({fulfilled: fulfilled,rejected: rejected});return this.handlers.length - 1; // 返回拦截器的ID}eject(id) {if (this.handlers[id]) {this.handlers[id] = null; // 移除拦截器}}forEach(fn) {this.handlers.forEach((h) => {if (h !== null) {fn(h);}});}
}

在发送请求或接收响应时,Axios 会创建一个 promise 链,并通过 forEach 方法将拦截器中的 fulfilled 和 rejected 函数添加到这个链中。这样,每个拦截器都可以对请求或响应进行处理,然后将结果传递到链的下一个拦截器,或者在出错时结束链的执行。


axios.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {chain.unshift(interceptor.fulfilled, interceptor.rejected);
});axios.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {chain.push(interceptor.fulfilled, interceptor.rejected);
});

在 Axios 的完整实现中,这个拦截器机制被集成到了 Axios 的请求发送和响应处理流程中。通过这种方式,Axios 可以在发送请求之前和接收响应之后,但在用户定义的 .then 或 .catch 执行之前,插入自定义的逻辑。
PS:以上代码只是为了说明 Axios 拦截器的实现原理,不是 Axios 源码的完整复制。深入了解看Axios 的官方 GitHub 仓库中的源码。

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

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

相关文章

E: Unable to locate package ros-kinetic-usb-cam

mkdir -p USB/src && cd USB/src catkin_init_workspace git clone https://github.com/bosch-ros-pkg/usb_cam.git cd .. catkin_make source devel/setup.bash echo "source ~/USB/devel/setup.bash" >> ~/.bashrc source ~/.bashrc 编译过程报错&…

yum进阶——配置yum源

一、yum概述 yum的主要作用 解决依赖关系 自动安装 自动升级 各个系统中的安装软件服务 CentOS7 :yum -y 安装 rpm包 CentOS8 :dnf(yum的升级版), Ubantu(22.04) :apt -y 安装,安装源为/…

对换与覆盖

目录 多道程序环境下的对换技术 对换技术的基本思想 对换技术的目标 对换技术的实现 对换技术的挑战 对换技术的改进 对换区的管理 对换区的分配 对换区的位置 对换区的大小 对换策略 多层次对换区管理 进程的换出与换入 1. 换出(Swapping Out&#xf…

vue面试题2-根据以下问题回答

以下是针对提供的关于Vue的问题的回答: Vue的基本原理: Vue.js是一个流行的JavaScript框架,用于构建用户界面和单页面应用。其基本原理包括响应式数据、模板、组件系统、指令、生命周期钩子和虚拟DOM。 双向数据绑定的原理: Vue通…

【ROS2大白话】四、ROS2非常简单的传参方式

系列文章目录 【ROS2大白话】一、ROS2 humble及cartorgrapher安装 【ROS2大白话】二、turtlebot3安装 【ROS2大白话】三、给turtlebot3安装realsense深度相机 【ROS2大白话】四、ROS2非常简单的传参方式 文章目录 系列文章目录前言一、launch文件传参的demo1. 编写launch.py文…

MySQL8.3日志文件占用硬盘空间过大,释放方法

执行 reset master; 即可解决问题,我写了个任务,定期执行 执行后目录效果

基于python flask的旅游景点评论数据可视化大屏实现,包括数据采集

背景 在旅游行业中,了解游客对旅游景点的评论和评价对于景点管理和市场营销至关重要。通过采集旅游景点评论数据并进行可视化分析,可以帮助景点管理者更好地了解游客对景点的看法和体验,发现优劣势,优化服务和提升用户满意度。基…

Web3的应用场景分析

Web3,即基于区块链技术的去中心化互联网,正逐渐改变我们与数字世界的互动方式。以下是Web3的一些主要应用场景。Web3技术正在各个领域推动创新,创造更多透明、开放和去中心化的解决方案,为用户带来更高的自主权和安全性。北京木奇…

使用 Vue 和 Leaflet 实现地图撒点功能

在现代 Web 应用中,地图功能变得越来越重要。Vue.js 结合 Leaflet 可以轻松实现复杂的地图功能。本文将介绍如何使用 Vue 和 Leaflet 实现地图撒点功能,展示一组数据点在地图上的分布情况。 安装 Leaflet 安装 Leaflet 库及其对应的 Vue 插件&#xff1…

手把手制作Vue3+Flask全栈项目 全栈开发之路实战篇 问卷网站(五)数据处理

全栈开发一条龙——前端篇 第一篇:框架确定、ide设置与项目创建 第二篇:介绍项目文件意义、组件结构与导入以及setup的引入。 第三篇:setup语法,设置响应式数据。 第四篇:数据绑定、计算属性和watch监视 第五篇 : 组件…

性能级NVMe全闪存储系统开箱评测

近日,我们对一款备受瞩目的Infortrend普安科技推出更高性能的存储产品——性能级NVMe全闪存储系统GS 5024UE 进行评测,这款设备搭载第五代IntelXeon处理器,性能达到50GB/s、1.3M IOPS与0.3毫秒延迟。下面对此款设备从外观、配置、产品性能及适…

瑞鑫RK3588 画中画 OSD 效果展示

这些功能本来在1126平台都实现过 但是迁移到3588平台之后 发现 API接口变化较大 主要开始的时候会比较费时间 需要找到变动接口对应的新接口 之后 就比较好操作了 经过几天的操作 已实现 效果如下

ThinkPHP发邮件配置教程?群发功能安全吗?

ThinkPHP发邮件的注意事项?如何优化邮件发送的性能? 无论是用户注册、密码重置还是消息提醒,发送邮件都是一个常见的需求。AokSend将详细介绍如何在ThinkPHP框架中配置和发送邮件,帮助开发者轻松实现邮件功能。 ThinkPHP发邮件&…

【Linux驱动】【手把手配置3568寄存器】点亮RK3568的一颗LED

【硬件】 3568的LED9 :引脚 GPIO0 B7 【配置GPIO的复用】 找配置复用关系的寄存器基地址、偏移地址、对应配置的GPIO。 查找:io -r -4 0xfdc2000c 系统设置的默认值 结果为1,意思是只有bit 0是1,其他全都为0。所以系统默认就是…

前端使用axios下载文件

首先,axios实例在发起下载文件请求时,应该配置responseType: ‘blob’,例如: // axios发起下载文档请求 export const downloadDoc (id: string) > {return request.get(/downloadDoc?id${id}, {// 参考官方文档https://www…

资质升级路径:掌握建筑装饰乙级设计资质要求

建筑装饰乙级设计资质的升级路径及要求可以归纳如下: 一、基本要求 企业资历与信誉: 企业需具有独立法人资格。社会信誉良好,注册资本不少于100万元人民币。从事建筑设计业务4年以上,并独立承担过不少于3项工程等级为二级及以上的…

翻译《The Old New Thing》- What were ShellExecute hooks designed for?

What were ShellExecute hooks designed for? - The Old New Thing (microsoft.com)https://devblogs.microsoft.com/oldnewthing/20080910-00/?p20933 Raymond Chen 2008年09月10日 ShellExecute 钩子是为什么设计的? 简要 ShellExecute钩子设计用于扩展可执行字…

比较PWM调光和无极调光

在比较PWM调光和无极调光哪种方式更节能时,需要综合考虑多个因素,如灯具类型、光源效率、调光范围以及使用场景等。 PWM调光系统通过调节LED驱动电流的占空比来实现LED亮度的调节,具有高精度、高稳定性、无闪烁现象以及适用范围广等优点。其节…

Python中的“点阵字体”

“点阵字体”是个啥?,在python中怎么使?在现在全面高清的 5 G 5G 5G时代,它还有用“武”之地? (笔记模板由python脚本于2024年06月01日 18:44:31创建,本篇笔记适合会基本编程的coder翻阅) 【学习的细节是欢…

一文搞懂DevOps、DataOps、MLOps、AIOps:所有“Ops”的比较

引言 近年来,“Ops”一词在 IT 运维领域的使用迅速增加。IT 运维正在向自动化过程转变,以改善客户交付。传统的应用程序开发采用 DevOps 实施持续集成(CI)和持续部署(CD)。但对于数据密集型的机器学习和人…