(Ajax)axios源码简析(一)——axios入口文件

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 源码

阅读 1.9k

247 声望
10 粉丝
0 条评论
247 声望
10 粉丝
文章目录
宣传栏