手写axios源码系列二:创建axios函数对象
文章目录
- 一、模块化目录介绍
- 二、创建 axios 函数对象
- 1、创建 axios.js 文件
- 2、创建 defaults.js 文件
- 3、创建 _Axios.js 文件
- 4、总结
当前篇章正式进入手写 axios 源码系列,我们要真枪实弹的开始写代码了。
因为 axios 源码的代码量比较庞大,所以我们这里只抓主线,让大家对 axios 的主要核心功能有个大概了解,至于具体的细节深入,需要大家去通读 axios 源码了解。手写 axios 源码系列只将其中的4个主要功能模块进行了手写,就是在上篇文章: 手写axios源码系列一:axios核心知识点 中介绍的四个核心功能点:
- axios 函数对象
- dispatchRequest 发送请求
- interceptors 拦截器
- cancelToken 取消请求
一、模块化目录介绍
建议大家先下载 axios 的源码,然后过一遍源码的目录文件,主要文件全部在 lib
目录下,这里我就不一一介绍了。
接下来看一下我手写 axios 源码所创建的目录介绍(文件名称依据源码文件名称命名):
- _Axios.js:axios的构造函数,因为有一个 axios.js,文件名不区分大小写会重复,所以添加了下横杠
_Axios
防止文件名重复;其中 request 方法为重点,拦截器功能在这里书写; - adapters.js:适配器,其中有一个方法
getAdapter
来获取发送请求的方式 xhr 或者 http ; - axios.js:整个目录的入口文件,创建了axios 函数对象以及对外暴露了一些属性以及方法;
- CancelToken:取消请求的功能代码;
- defaults.js:默认配置项(预配置);
- dispatchRequest.js:真正发送请求以及接收响应数据的文件目录;
- index.html:手写axios源码的测试代码,测试一下自己写的代码是否正确;
- InterceptorManager:拦截器的构造函数;
- xhr.js:书写 AJAX(Asynchronous Javascript And XML) 代码的文件目录。
二、创建 axios 函数对象
1、创建 axios.js 文件
import Axios from "./_Axios.js";
import defaults from "./defaults.js";
import CancelToken from "./CancelToken";// 初始化 axios 函数对象
function createInstance(defaultConfig){// 生成 _Aixos 的实例对象const context = new Axios(defaultConfig);// 生成 instance 绑定函数,并且绑定 this 为 context,防止调用时 this 指向不明const instance = Axios.prototype.request.bind(context, ...arguments);// 将 context 实例对象的属性复制到 instance 上Object.keys(context).forEach(key=>{instance[key] = context[key]})// 将 Axios 原型对象的属性复制到 instance 上Object.keys(Axios.prototype).forEach(key=>{instance[key] = Axios.prototype[key]})// axios.create 方法instance.create = function(instanceConfig){const mergeConfig = {...defaultConfig,...instanceConfig}return createInstance(mergeConfig);}// instance 就是 axiosreturn instance;
}
// 创建 axios 函数对象
const axios = createInstance(defaults);
// 对外暴露 CancelToken 类,取消请求时使用
axios.CancelToken = CancelToken;
// 导出 axios
export default axios;
2、创建 defaults.js 文件
export default {// 适配器的默认配置,写适配器 adapters 代码时需要传入的配置adapter: ['xhr', 'http']
}
3、创建 _Axios.js 文件
import InterceptorManager from "./IntercptorManager.js";
import dispatchRequest from "./dispatchRequest.js";export default class Axios {constructor(config){// 实例对象的 defaults属性(默认配置对象)this.defaults = config;// 实例对象的 interceptors属性(拦截器)this.interceptors = {request: new InterceptorManager(),response: new InterceptorManager()}}// request 发送请求request(configOrUrl, config){// 判断 configOrUrl是否为 url地址if(typeof configOrUrl === "string"){config.url = configOrUrl} else {config = {...configOrUrl,...config}}// 将 config包装为一个成功状态的 promise对象let promise = Promise.resolve(config);// 创建执行链,这里调用 dispatchRequest方法以发送请求const chain = [dispatchRequest, undefined];// 调用 promise.then()将 config传入 dispatchRequest中,dispatchRequest中返回的也是一个 prommise对象promise = promise.then(chain[0], chain[1]);// 发送请求后返回的是一个 promise对象return promise;}
}
const methodsWithNoData = ["delete", "get", "head", "options"];
const methodsWithData = ["post", "put", "patch"];
// 给 Axios的原型对象添加请求方法
methodsWithNoData.forEach(method => {Axios.prototype[method] = function(url, config){config = { ...config, method, url };// 最后返回 request生成的 promise对象return this.request(config)}
})
methodsWithData.forEach(method => {Axios.prototype[method] = function(url, data, config){config = { ...config, method, url, data };return this.request(config)}
})
4、总结
以上代码包含了 axios 函数对象的创建过程:
- 使用
createInstance()
生成 axios 函数对象- 先实例化对象 context,然后使用 Axios.prototype.request 方法 bind 一个新函数 instance,调用
instance()
就相当于调用Axios.prototype.request()
; - 生成的新函数 instance 没有任何属性以及方法可以使用,所以将 context 以及 Axios.prototype 上的属性以及方法复制给 instance 使用;
- 挂载一个 create 方法,供 axios 封装使用,调用
create()
方法其实就是调用createInstance()
方法。
- 先实例化对象 context,然后使用 Axios.prototype.request 方法 bind 一个新函数 instance,调用
- 为 axios 挂载其他属性,对外暴露以供使用。
- 导出 axios 函数对象。
下篇文章我们着重讲解发送请求 dispatchRequest 以及适配器 adapters 。
相关文章:

手写axios源码系列二:创建axios函数对象
文章目录 一、模块化目录介绍二、创建 axios 函数对象1、创建 axios.js 文件2、创建 defaults.js 文件3、创建 _Axios.js 文件4、总结 当前篇章正式进入手写 axios 源码系列,我们要真枪实弹的开始写代码了。 因为 axios 源码的代码量比较庞大,所以我们这…...

HTB-Time
HTB-Time 信息收集80端口 立足pericles -> root 信息收集 80端口 有两个功能,一个是美化JSON数据。 一个是验证JSON,并且输入{“abc”:“abc”}之类的会出现报错。 Validation failed: Unhandled Java exception: com.fasterxml.jackson.core.JsonPa…...

零基础C/C++开发到底要学什么?
作者:黑马程序员 链接:https://www.zhihu.com/question/597037176/answer/2999707086 先和我一起看看,C/C学完了可以做什么: 软件工程师:负责设计、开发、测试和维护各类型的软件应用程序;游戏开发&#x…...
OpenStack中的CPU与内存超分详解
目录 什么是超分 CPU超分 查看虚拟机虚拟CPU运行在哪些物理CPU上 内存超分 内存预留 内存共享 如何设置内存预留和内存共享 全局设置 临时设置 什么是超分 超分通常指的是CPU或者GPU的分区或者分割,以在一个物理CPU或GPU内模拟多个逻辑CPU或GPU的功能。这…...
main.m文件解析--@autoreleasepool和UIApplicationMain
iOS 程序入口UIApplicationMain详解,相信大家新建一个工程的时候都会看到一个main.m文件,只不过我们很少了解它,现在我们分析一下它的作用是什么? 一、main.m文件 int main(int argc, char * argv[]) {autoreleasepool {return …...

C语言复习之顺序表(十五)
📖作者介绍:22级树莓人(计算机专业),热爱编程<目前在c阶段>——目标C、Windows,MySQL,Qt,数据结构与算法,Linux,多线程,会持续分享…...

学系统集成项目管理工程师(中项)系列10_立项管理
1. 系统集成项目管理至关重要的一个环节 2. 重点在于是否要启动一个项目,并为其提供相应的预算支持 3. 项目建议 3.1. Request for Proposal, RFP 3.2. 立项申请 3.3. 项目建设单位向上级主管部门提交的项目申请文件,是对拟建项目提出的总体设想 3…...

电视盒子哪个好?数码小编盘点2023电视盒子排行榜
随着网络剧的热播,电视机又再度受宠,电视盒子也成为不可缺少的小家电。但面对复杂的参数和品牌型号,挑选时不知道电视盒子哪款最好,小编根据销量和用户评价整理半个月后盘点了电视盒子排行榜前五,对电视盒子哪个好感兴…...

flink动态表的概念详解
目录 前言🚩 动态表和持续不断查询 stream转化成表 连续查询 查询限制 表转化为流 前言🚩 传统的数据库SQL和实时SQL处理的差别还是很大的,这里简单列出一些区别: 尽管存在这些差异,但使用关系查询和SQL处理流并…...

ArcGIS Pro用户界面
目录 1 功能区 1.1 快速访问工具栏 1.2 自定义快速访问工具栏 1.3 自定义功能区选项 1.3.1 添加组和命令 1.3.2 添加新选项卡 2 视图 3 用户界面排列 编辑 4 窗格 4.1 内容窗格 4.2 目录窗格 4.3 目录视图(类似ArcCatalog) 4.4 浏览对话框…...

HDCTF 2023 Pwn WriteUp
Index 前言Pwnner分析EXP: KEEP_ON分析EXP: Minions分析EXP: 后记: 前言 本人是菜狗,比赛的时候只做出来1题,2题有思路但是不会,还是太菜了。 栈迁移还是不会,但又都是栈迁移的题,真头大。得找时间好好学学…...

【 Spring 事务 】
文章目录 一、为什么需要事务(简单回顾)二、MySQL 中的事务使⽤三、Spring 中事务的实现3.1 Spring 编程式事务(手动事务)3.2 Spring 声明式事务(自动事务)3.2.1 Transactional 作⽤范围3.2.2 Transactional 参数说明3.2.3 Transactional 不进行事务回滚的情况3.2.4 Transactio…...

【刷题之路】LeetCode 203. 移除链表元素
【刷题之路】LeetCode 203. 移除链表元素 一、题目描述二、解题1、方法1——在原链表上动刀子1.1、思路分析1.2、代码实现 2、方法2——使用额外的链表2.1、思路分析2.2、代码实现 一、题目描述 原题连接: 203. 移除链表元素 题目描述: 给你一个链表的…...

关于Open Shift(OKD) 中 用户认证、权限管理、SCC 管理的一些笔记
写在前面 因为参加考试,会陆续分享一些 OpenShift 的笔记博文内容为 openshift 用户认证和权限管理以及 scc 管理相关笔记学习环境为 openshift v3 的版本,有些旧这里如果专门学习 openshift ,建议学习 v4 版本理解不足小伙伴帮忙指正 对每个…...
活动文章测试(勿删)
大家好! 我是CSDN官方博客! 恭喜你正式加入CSDN博客,迈上技术成神之路~~ 路漫漫其修远兮——身为技术人,求索之路道阻且艰,但一万次的翘首却比不过一次的前行。 现在,就来开启你的个人博客,发布…...

Windows下 批量重命名文件【bat实现】
目录 前言 一、Windows简单实现重命名 二、使用命令行和Excel实现重命名 前言 在实际应用中,我们经常会遇到将指定文件夹下的文件重命名,以便程序读写。 本文介绍了两种方式,都是在Windows系统中自带的重命名方式。 一、Windows简单实现…...

从 Milvus 2.2 到 2.2.6,我们是如何持续稳定升级的
最近,Milvus 发布了 2.2.6 版本,在修复了一些 bug 后,Milvus 变得越发稳定。 事实上,自 Milvus 升级至 2.X 版本以来,我们一直在努力改进及优化,推出了诸如从文件中批量导入数据、基于磁盘的近似最近邻&…...

自学python有推荐的么
大学生自学那必然是首推B站大学哇能称之为大学不是没有道理的,看看各个领域的学习分享都是非常多的,关键是看着弹幕就感觉像是在和一帮志同道合的小伙伴一起学习,自学的道路也不再孤单了,遇见不会的没准还能在弹幕和评论区找到答案…...

设计模式 --- 行为型模式
一、概述 行为型模式用于描述程序在运行时复杂的流程控制,即描述多个类或对象之间怎样相互协作共同完成单个对象都无法单独完成的任务,它涉及算法与对象间职责的分配。 行为型模式分为类行为模式和对象行为模式,前者采用继承机制来在类间分…...
防御式编程
防御式编程是提高软件质量技术的有益辅助手段。就是一开始不要在代码里引入错误。使用迭代式设计、编码前写伪代码,写测试用例,助于防止引入错误。 断言 断言是用来检查永远不应该发生的非正常情况,处理这些错误的代码 错误处理技术ÿ…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄
文|魏琳华 编|王一粟 一场大会,聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中,汇集了学界、创业公司和大厂等三方的热门选手,关于多模态的集中讨论达到了前所未有的热度。其中,…...
synchronized 学习
学习源: https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖,也要考虑性能问题(场景) 2.常见面试问题: sync出…...

vscode(仍待补充)
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh? debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP? 模型控制协议 (MCP) 是一种创新的协议,旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议,它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日,国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解,“超级…...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...
MySQL账号权限管理指南:安全创建账户与精细授权技巧
在MySQL数据库管理中,合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号? 最小权限原则…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V,是一个正整数,表示每 V V V 个普通金属 O O O 可以冶炼出 …...