axios源碼(二)

axios的用法請參考: https://www.kancloud.cn/yunye...ios

今天分析axios的入口文件lib下的axios.js,以下圖:image.pngaxios

文件開頭引入了一些輔助性的方法和對象:image.png
utils: 主要是一些驗證函數,好比isNumber isString isFunction isBuffer這種,
bind: 一個閉包函數segmentfault

module.exports = function bind(fn, thisArg) {
  return function wrap() {
    var args = new Array(arguments.length);
    for (var i = 0; i < args.length; i++) {
      args[i] = arguments[i];
    }
    return fn.apply(thisArg, args);  // fn的做用域中能夠拿到thisArg中的屬性和方法
  };
};

Axios: axios的構造函數.就是說咱們用的axios({})是Axios的一個實例
mergeConfig: 一個函數,用來合併配置,就是將咱們傳入的配置和默認配置合併
defaults: 默認對象.promise

文件內有一個建立實例的方法,以往的構造函數是直接用new關鍵字建立實例,axios使用這個:閉包

/**
 * 建立axios實例
 *
 * @param {Object} defaultConfig 實例的默認配置
 * @return {Axios} 返回一個新的實例
 */
function createInstance(defaultConfig) {
  var context = new Axios(defaultConfig); // axios的構造函數的實例
  // console.log('context',typeof context);
  var instance = bind(Axios.prototype.request, context); // 一個閉包,返回一個函數  第一個參數是方法,第二個是正常參數,調用instance時參數將傳給Axios.prototype.request,將this指向context
                                                        // 也就是axios({}),咱們傳的對象傳給了request
  // 將Axios.prototype的屬性和屬性值變成instance的屬性和屬性值  並返回instance
  utils.extend(instance, Axios.prototype, context);

  // 將context複製給實例
  utils.extend(instance, context);  //  將context的屬性賦給instance,再將值經過bind給了instance

  return instance; // 是一個函數   axios({})就是instance({})
}
// 建立默認的實例
var axios = createInstance(defaults); // defaults一個大的對象. 各類配置

而後給實例axios添加屬性:app

// 公開 Axios 類並容許類繼承  axios已是一個實例, 又添加了一個Axios屬性,值是一個構造函數
axios.Axios = Axios;

// 添加一個工廠用來建立新的實例
axios.create = function create(instanceConfig) {
  return createInstance(mergeConfig(axios.defaults, instanceConfig)); // createInstance方法的返回值
};

// 公開 Cancel & CancelToken
axios.Cancel = require('./cancel/Cancel');
axios.CancelToken = require('./cancel/CancelToken');
axios.isCancel = require('./cancel/isCancel');

// 公開 all/spread
axios.all = function all(promises) {
  return Promise.all(promises); // Promise.all()方法用於將多個 Promise 實例,包裝成一個新的 Promise 實例
};
axios.spread = require('./helpers/spread');

// 公開 isAxiosError
axios.isAxiosError = require('./helpers/isAxiosError');

module.exports = axios;

// 容許使用模塊化的default語法
module.exports.default = axios;
相關文章
相關標籤/搜索