（Ajax）axios源碼簡析（一）——axios入口文件

傳送門：

• axios源碼簡析（一）——axios入口文件
• axios源碼簡析（二）——Axios類與攔截器
• axios源碼簡析（三）——請求與取消請求

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