ToB企服应用市场:ToB评测及商务社交产业平台

标题: Axios 源码解析-完整篇 [打印本页]

作者: 知者何南 时间: 2025-2-20 18:14
标题: Axios 源码解析-完整篇
源码目次结构
<hr> 先看看目次说明，如下

执行流程
<hr> 先看看整体执行流程，有大体的概念，后面会细说
整体流程有以下几点：

axios.create 创建单独实例，或直接使用 axios 实例(axios/axios.get…)
request 方法是入口，axios/axios.get 等调用都会走进 request 举行处置处罚
请求拦截器
请求数据转换器，对传入的参数 data 和 header 做数据处置处罚，比如 JSON.stringify(data)
适配器，判断是浏览器端还是 node 端，执行差别的方法
相应数据转换器，对服务端的数据举行处置处罚，比如 JSON.parse(data)
相应拦截器，对服务端数据做处置处罚，比如 token 失效退出登岸，报错 dialog 提示
返回数据给开辟者

入口文件(lib/axios.js)

从下面这段代码可以得出，导出的 axios 就是实例化后的对象，还在其上挂载 create 方法，以供创建独立实例，从而达到实例之间互不影响，相互隔离。
…
// 创建实例过程的方法
function createInstance(defaultConfig) {
return instance;
}
// 实例化
var axios = createInstance(defaults);
// 创建独立的实例，隔离作用域
axios.create = function create(instanceConfig) {
return createInstance(mergeConfig(axios.defaults, instanceConfig));
};
…
// 导出实例
module.exports = axios;
可能各人对 createInstance 方法感到好奇，下面一探究竟。
function createInstance(defaultConfig) {
// 实例化，创建一个上下文
var context = new Axios(defaultConfig);
// 寻常调用的 get/post 等等请求，底层都是调用 request 方法
// 将 request 方法的 this 指向 context(上下文)，形成新的实例
var instance = bind(Axios.prototype.request, context);
// Axios.prototype 上的方法 (get/post…)挂载到新的实例 instance 上，
// 并且将原型方法中 this 指向 context
utils.extend(instance, Axios.prototype, context);
// Axios 属性值挂载到新的实例 instance 上
// 开辟中才能使用 axios.default/interceptors
utils.extend(instance, context);
return instance;
}
从上面代码可以看得出，Axios 不是简单的创建实例 context，而且举行一系列的上下文绑定和属性方法挂载，从而去支持 axios()，也支持 axios.get() 等等用法；
createInstance 函数是一个焦点入口，我们在把上面流程梳理一下：

通过构造函数 Axios 创建实例 context，作为下面 request 方法的上下文（this 指向）
将 Axios.prototype.request 方法作为实例使用，并把 this 指向 context，形成新的实例 instance
将构造函数 Axios.prototype 上的方法挂载到新的实例 instance 上，然后将原型各个方法中的 this 指向 context，开辟中才能使用 axios.get/post… 等等
将构造函数 Axios 的实例属性挂载到新的实例 instance 上，我们开辟中才能使用下面属性

axios.default.baseUrl = 'https://…'
axios.interceptors.request.use(r

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)