搜索
您的当前位置:首页正文

Axios源码解析(三):流程分析

来源:易榕旅网

1. package.json

首先看下package.json文件中的内容,package.json是整个项目的包配置文件。package.json中的main: index.js字段指定了Axios库的入口文件。

2. index.js

module.exports = require('./lib/axios');

index.js导入了./lib/axios文件导出的数据,并将其导出。

3. /lib/axios.js

该文件的重点在createInstance函数,在该函数的内部创建axios实例,并为其添加一系列的属性和方法。
createInstance函数体外,也为axios添加了一系列工具性质的方法。具体介绍看下面的代码注释。

'use strict';

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

/**
 * Create an instance of Axios
 *
 * @param {Object} defaultConfig The default config for the instance
 * @return {Axios} A new instance of Axios
 */
function createInstance(defaultConfig) {
   
  //context可以理解成上下文
  //context对象有defaults,interceptors两个属性,
  //context对象原型链上有'request','getUri','delete', 'get', 'head', 'options','post', 'put', 'patch'等一系列方法
  var context = new Axios(defaultConfig);

  //bind函数的作用是生成新的函数,新的函数的内部还是执行Axios.prototype.request函数,只不过request函数内部的this指向了context
  //instance就是该库最终导出的axios,instance是一个函数,
  //此时我们可以像下面这样执行axios发请求了:
  // 发送 POST 请求
  // axios({
   
  //   method: 'post',
  //   url: '/user/12345',
  //   data: {
   
  //     firstName: 'Fred',
  //     lastName: 'Flintstone'
  //   }
  // });
  var instance = bind(Axios.prototype.request, context);
  
  //将Axios.prototype中的方法绑定到instance上面,并且方法中的this指向context(默认的上下文)
  //通过绑定方法,我们可以像下面这样执行axios发送特定方法的请求了:
  // axios.get('/user?ID=12345')
  // axios.get('/user', {
   
  //   params: {
   
  //     ID: 12345
  //   }
  // })
  // axios.post('/user', {
   
  //   firstName: 'Fred',
  //   lastName: 'Flintstone'
  // })
  utils.extend(instance, Axios.prototype, context);

  // 将context中的defaults,interceptors属性绑定到instance上面
  // 通过绑定属性,我们可以像下面这样使用拦截器了:
  // axios.interceptors.request.use(function (config) {
   
  //   // 在发送请求之前做些什么
  //   return config;
  // }, function (error) {
   
  //   // 对请求错误做些什么
  //   return Promise.reject(error);
  // });
  utils.extend(instance, context);

  return instance;
}

// Create the default instance to be exported
var axios = createInstance(defaults);

// Expose Axios class to allow class inheritance
axios.Axios = Axios;

// Factory for creating new instances
//能够创建一个新的instance,他基于新的配置(上下文对象),
axios.create = function create(instanceConfig) {
   
  return createInstance(mergeConfig(axios.defaults, instanceConfig));
};

// Expose Cancel & CancelToken
//为该库导出的axios添加一些方法,这些方法在我们通过create函数生成的instance中并不存在
axios.Cancel = require('./cancel/Cancel');
axios.CancelToken = require('./cancel/CancelToken');
axios.isCancel = require(

因篇幅问题不能全部显示,请点此查看更多更全内容

Top