本文参加了每周一起学习200行源码共读活动
前言
axios 是 js 生态中常用的请求库。在使用的时候，我们会有很多疑惑，比如：
- axios 外部函数的基础结构：
- axios 为什么可以既作为对象去调用方法，又可以作为函数进行传参，axios 下的 Axios 又可以初始化一个实例？
- axios 为什么可以通过调用一个 create 来生成一个实例进行请求，又可以直接使用 axios 进行请求？
- 拦截器实现原理：
- 设置多个拦截器时，如果将拦截器函数的结果传给下一个拦截器函数？
- 请求和响应拦截器的执行顺序为什么不一样？
- 请求取消实现原理：
- axios 如何做到取消请求的？
- 请求实现原理：
- axios 如何做到既可以在浏览器中实现请求，也可以在 node 中实现请求？
这些问题在我们去扒 axios 的源码时，都可以得到解决。
在扒源码之前我们首先要找到 axios 的源代码，点此前往。
之后就开始了愉快的扒代码。
基本结构
我们先来看一下 axios 的基本结构，在日后的扒代码中，更方便一些。
话不多说，先上图，上图之后都好说。
在图中，我们可以清晰的看到，我们所使用的整个 axios 其实本身是一个函数，只不过这个函数上挂载了很多方法，并且将核心类 Axios 的属性及方法也拷贝了上来。所以 axios 其实即是函数，也是对象。
而核心类 Axios 中是我们常用的一些方法，包括常用的 config 、 request 、 interceptors 等属性或方法也都是在这里面。
从图中我们可以看出来，get 、 put 、 post 等函数其实都是进行了 config 设置后的 request。
interceptors 本质其实是一个 Object，它上面只有 request 和 response 两个属性，这两个属性其实都是 InterceptorManager 类的实例化。
其他方法也都是差不多。
而我们常用的 create 并不在图上。这是因为 create 其实是返回了 axios 的别名函数 createInstance 自身，并传入了历史已设置好的参数。相当于将整个 axios 进行了拷贝。
License
本文由持烨原创，采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
Share
