（Ajax）axios源码简析（一）——axios入口文件

2024年5月10日 178次阅读 来源: kimi013

传送门：

axios简介

axios是时下最流行的http请求库，可以用于浏览器环境与nodejs环境。目前axios的最近版本是0.18.0，本文所分析的源码也是该版本。

axios的主要特征包括：

  • 在浏览器环境创建xhr请求
  • 在nodejs环境创建http请求
  • 支持PromiseAPI
  • 请求与响应拦截器
  • 处理请求参数与返回数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防范XSRF

axios基本用法

axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })  .then(function () {
    // always executed
  });

axios的具体使用方法见GitHub。

项目结构目录

├── /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 defaults = require('./defaults');

/* ... */

var axios = createInstance(defaults);

/* ... */

module.exports = axios;

在入口文件中，可以看到通过createInstance方法创建了axios对象，然后将其导出，其中defaults是默认的配置。

createInstance方法的具体实现：

function createInstance(defaultConfig) {

    // 创建一个Axios类的实例，得到一个上下文环境
    // 包含defaults配置与拦截器（详见/lib/core/Axios.js）
    var context = new Axios(defaultConfig);

    // instance是一个函数（request请求方法）
    // this绑定到context上下文
    var instance = bind(Axios.prototype.request, context);

    // 将Axios.prototype的各方法绑定到instance上
    // 其中this作用域为context上下文
    utils.extend(instance, Axios.prototype, context);

    // 将context中的属性（defaults与拦截器）绑定到instance实例中
    utils.extend(instance, context);

    return instance;
}

值得注意的是，入口文件导出的axios并不是Axios类的实例，而是bind(Axios.prototype.request, context)返回的一个函数，其中context才是Axios类的实例。

入口文件的其他代码如下：

// 将Axios类暴露出来（如果用户有使用的需求）
axios.Axios = Axios;

// 工厂函数，根据用户传入的配置，创建新的axios
axios.create = function create(instanceConfig) {
    return createInstance(mergeConfig(axios.defaults, instanceConfig));
};

// 取消请求的方法
axios.Cancel = require('./cancel/Cancel');
axios.CancelToken = require('./cancel/CancelToken');
axios.isCancel = require('./cancel/isCancel');

// 处理并行请求的方法
axios.all = function all(promises) {
    return Promise.all(promises);
};
axios.spread = require('./helpers/spread');

// 导出axios
module.exports = axios;

// 用于TypeScript
module.exports.default = axios;

参考

深入浅出 axios 源码

    原文作者：kimi013
    原文地址: https://segmentfault.com/a/1190000016169864
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞