持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第21天,点击查看活动详情
一、题目
Axios,是一个基于promise () 的网络请求库,作用于[node.js]和[浏览器]中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在[服务端]它使用原生node.js [http]模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。
二、大致浏览
该版本是axios的0.27.2版本
文件介绍
- index.js:入口文件,内容中引用了lib下的axios.js文件
axios文件是项目的主文件
该文件中的引用情况如下:
文件的引用:
- utils: 该文件写的时候公共方法
- bind: 该文件写的是辅助的方法
- Axios:该文件写的是核心方法
- mergeConfig: 该文件合并配置
- defaults: 该文件是默认配置
在axios最后一行,可以看到导出的是axios
查看axios
axios是createInstance函数的赋值,从命名就可以看出这里的作用是初始化实例
可以看到定义了context = new Axios(defaultConfig),这里先看下这个defaultConfig配置
default配置
这里看getDefaultAdapter()函数
getDefaultAdapter()函数
- 通过判断当前的是否可以创建XMLHttpRequest实例,来决定是否用xhr
- 通过判断当前的环境判断是否是用node的http模块
这里来看下http和xhr
http 与xhr
adapters/xhr
该文件基于浏览器的XMLHttpRequest进行封装
adapters/http
基于nodejs的http模块进行的封装
new Axios实例对象
在看完默认配置后,回到axios文件,这里查看core/Axios文件
这里看到函数Axios,传入默认配置,这里定义默认的参数this.default,同时看到这里拦截器定义了request和response属性。
再往下看,就能看到axios的原型上挂载了request、getUri等方法
然后回过头来看拦截器的管理,这里创建的实例new InterceptorManager()
InterceptorManager 文件
这里看到了拦截器的use、 eject、forEach等方法
定义了拦截器,这里定义拦截器的handlers,通过use添加对象到this.handler,eject删除this.handler中的参数,forech循环函数。
bind 文件
看到这里,就可以在回到主文件axios.js,这里有一个bind函数,传入了一个函数和一个对象。
bind 返回一个调用有指定 this 值和参数的函数的结果
extend 函数
再回到主文件
看到使用了utils的extend函数,能看到传入了是三个参数,分别是instance, Axios.prototype, context
在extend看到最后返回instance,这里通过循环给instance添加了属性。
返回axios.js,这里看到最后的初始化,创建crate函数,最后返回instance。
三、总结
在看的过程中还有很多东西不明白,等后边再详细看。第一次搞这个,好多都不太明白,似懂非懂,有不对的地方,请留言,欢迎提出意见!!!