Axios

向画

已于 2024-05-08 23:11:53 修改

阅读量1.3k

点赞数 42

CC 4.0 BY-SA版权

分类专栏： HTTP 文章标签：微服务 javascript

于 2024-05-08 22:57:58 首次发布

mk@

本文链接：https://blog.csdn.net/kjl536566/article/details/138589270

Axios是神马🐎？

axios一个基于 Promise 来管理 http 请求的简洁、易用且高效的代码封装库。通俗一点来讲，它是一个前端替代Ajax的一个东西，可以使用它发起http请求接口功能，它是基于Promise的，相比于Ajax的回调函数能够更好的管理异步操作。源码地址

Axios 的主要特性

基于 Promise
支持浏览器和 node.js环境
可添加请求、响应拦截器和转换请求和响应数据
请求可以取消、中断
自动转换 JSON 数据
客户端支持防范 XSRF

源码目录结构及主要文件功能描述基于版本0.21.4

├── /lib/ # 项目源码目

│ ├── /adapters/ # 定义发送请求的适配器

│ │ ├── http.js # node环境http对象

│ │ ├── xhr.js # 浏览器环境XML对象

│ ├── /cancel/ # 定义取消请求功能

│ ├── /helpers/ # 一些辅助方法

│ ├── /core/ # 一些核心功能

│ │ ├── Axios.js # axios实例构造函数

│ │ ├── createError.js # 抛出错误

│ │ ├── dispatchRequest.js # 用来调用http请求适配器方法发送请求

│ │ ├── InterceptorManager.js # 拦截器管理器

│ │ ├── mergeConfig.js # 合并参数

│ │ ├── settle.js # 根据http响应状态，改变Promise的状态

│ │ └── transformData.js # 转数据格式

│ ├── axios.js # 入口，创建构造函数

│ ├── defaults.js # 默认配置

│ └── utils.js # 公用工具函数

从入口出发

我们打开/lib/axios.js ，从入口开始分析。

var utils = require('./utils');
var bind = require('./helpers/bind');
var Axios = require('./core/Axios');
var mergeConfig = require('./core/mergeConfig');
var defaults = require('./defaults');

// 创建axios实例的方法
function createInstance(defaultConfig) {
  // 根据默认配置构建个上下文对象，包括默认配置和请求、响应拦截器对象
  var context = new Axios(defaultConfig);
  // 创建实例 bind后返回的是一个函数，并且上下文指向context
  var instance = bind(Axios.prototype.request, context);
  // 拷贝prototype到实例上 类似于把Axios的原型上的方法(例如: request、get、post...)继承到实例上，this指向为context
  utils.extend(instance, Axios.prototype, context);
  // 拷贝上下文对象属性(默认配置和请求、响应拦截器对象)到实例上， this指向为context
  utils.extend(instance, context);
  
  // 创建axios实例，一般axios封装 应该都会用到 （我们把一些默认、公共的配置都放到一个实例上，复用实例，无需每次都重新创建实例）
  instance.create = function create(instanceConfig) {
    // 这里mergeConfig 就是用来深度合并的
    return createInstance(mergeConfig(defaultConfig, instanceConfig));
  };

	// 返回实例
  return instance;
}

// 创建实例 defaulst为默认配置 
var axios = createInstance(defaults);

// 向外暴露Axios类，可用于继承 （本人暂未使用过）
axios.Axios = Axios;

// 这里抛出 中断/取消请求的相关方法到入口对象
axios.Cancel = require('./cancel/Cancel');
axios.CancelToken = require('./cancel/CancelToken');
axios.isCancel = require('./cancel/isCancel');

// 并发请求 完全就是用promise的能力
axios.all = function all(promises) {
  return Promise.all(promises);
};
// 和axios.all 共同使用,单个形参数组参数转为多参 =====> 后面有详解！！！
axios.spread = require('./helpers/spread');

// 用作监测是否为Axios抛出的错误
axios.isAxiosError = require('./helpers/isAxiosError');
// 导出
module.exports = axios;

// 允许在ts中使用默认导出
module.exports.default = axios;

createInstance

通过入口文件的分析我们可以发现：

我们平常开发中直接使用axios.create()构建的实例和直接axios()，都是通过createInstance这个函数构造出来的。

这个函数大概做了如下几件事：

首先是根据默认配置构建个上下文对象，包括默认配置和请求、响应拦截器对象
创建实例 bind后返回的是一个函, 所以我们使用时可以axios(config)这么使用，并且上下文指向context
拷贝prototype到实例上类似于把Axios的原型上的方法(例如: request、get、post...)继承到实例上，使用时才可以axios.get()、axios.post()，this指向为context
拷贝上下文对象属性(默认配置和请求、响应拦截器对象)到实例上， this指向为context
返回实例（实例为函数)