1
import axios from 'axios';
2

3
axios(config) // 直接传入配置
4
axios(url[, config]) // 传入url和配置
5
axios[method](url[, option]) // 直接调用请求方式方法，传入url和配置
6
axios[method](url[, data[, option]]) // 直接调用请求方式方法，传入data、url和配置
7
axios.request(option) // 调用 request 方法
8

9
// 实例 axiosInstance 也具有以上 axios 的能力
10
const axiosInstance = axios.create(config)
11
// 调用 all 和传入 spread 回调
12
axios.all([axiosInstance1, axiosInstance2]).then(axios.spread(response1, response2))

1
function createInstance(defaultConfig) {
2
  var context = new Axios(defaultConfig);
3

4
  // instance指向了原型上的request方法(在instance上绑定request方法)，并且上下文指向context。也就是说可以直接以 instance(option) 的方式调用
5
  // 在Axios.prototype.request 中对第一个参数的数据类型判断，使得我们能以 instance(url,option)方式调用
6
  var instance = bind(Axios.prototype.request, context);
7

8
  // Copy axios.prototype to instance
9
  // 这一步主要是将 Axios原型上的方法扩展到instance对象上，
10
  // 并且指定了上下文为context，所以之后执行Axios.prototype上的方法时，this会指向context
11
  utils.extend(instance, Axios.prototype, context);
12

13
  // Copy context to instance
14
  // 把context对象上的自身属性和方法扩展到instance上
15
  // (注：因为extend内部使用的forEach方法对对象做for in 遍历时，只遍历对象本身的属性，而不会遍历原型链上的属性)
16
  // 这样，instance 就有了  defaults、interceptors 属性。
17
  utils.extend(instance, context);
18
  return instance;
19
}
20

21
// Create the default instance to be exported 创建一个由默认配置生成的axios实例
22
var axios = createInstance(defaults);
23

24
// Factory for creating new instances
25
// 扩展axios.create工厂函数，内部也是调用了 createInstance
26
axios.create = function create(instanceConfig) {
27
  return createInstance(mergeConfig(axios.defaults, instanceConfig));
28
};
29

30
// Expose all/spread
31
axios.all = function all(promises) {
32
  return Promise.all(promises);
33
};
34

35
axios.spread = function spread(callback) {
36
  return function wrap(arr) {
37
    return callback.apply(null, arr);
38
  };
39
};
40

41
module.exports = axios;

1
Axios.prototype.request = function request(config) {
2
  // Allow for axios('example/url'[, config]) a la fetch API
3
  // 首先判断 config 参数是否是 字符串，如果是则认为第一个参数是 URL，第二个参数是真正的config
4
  if (typeof config === 'string') {
5
    config = arguments[1] || {};
6
    // 把 url 放置到 config 对象中，便于之后的 mergeConfig
7
    config.url = arguments[0];
8
  } else {
9
    // 如果 config 参数不是 字符串，则整体都当做config
10
    config = config || {};
11
  }
12
  // 合并默认配置和传入的配置
13
  config = mergeConfig(this.defaults, config);
14
  // 设置请求方法
15
  config.method = config.method ? config.method.toLowerCase() : 'get';
16
  /*
17
    省略... 此部分会在后续拦截器单独看
18
  */
19
};
20

21
// 在 Axios 原型上挂载 'delete', 'get', 'head', 'options' 且不传参的请求方法，实现内部也是 request
22
utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
23
  Axios.prototype[method] = function(url, config) {
24
    return this.request(utils.merge(config || {}, {
25
      method: method,
26
      url: url
27
    }));
28
  };
29
});
30

31
// 在 Axios 原型上挂载 'post', 'put', 'patch' 且传参的请求方法，实现内部同样也是 request
32
utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
33
  Axios.prototype[method] = function(url, data, config) {
34
    return this.request(utils.merge(config || {}, {
35
      method: method,
36
      url: url,
37
      data: data
38
    }));
39
  };
40
});

1
Axios.prototype.request = function request(config) {
2
  /*
3
    先是 mergeConfig ... 等，不再阐述
4
  */
5
  // Hook up interceptors middleware
6
  // 创建拦截器链. dispatchRequest 是重中之重，后续重点
7
  var chain = [dispatchRequest, undefined];
8

9
  // push各个拦截器方法 注意：interceptor.fulfilled 或 interceptor.rejected 是可能为undefined
10
  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
11
    // 请求拦截器逆序 注意此处的 forEach 是自定义的拦截器的forEach方法
12
    chain.unshift(interceptor.fulfilled, interceptor.rejected);
13
  });
14

15
  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
16
    // 响应拦截器顺序 注意此处的 forEach 是自定义的拦截器的forEach方法
17
    chain.push(interceptor.fulfilled, interceptor.rejected);
18
  });
19

20
  // 初始化一个promise对象，状态为resolved，接收到的参数为已经处理合并过的config对象
21
  var promise = Promise.resolve(config);
22

23
  // 循环拦截器的链chain
24
  while (chain.length) {
25
    promise = promise.then(chain.shift(), chain.shift()); // 每次弹出两个拦截器执行
26
  }
27
  // 返回 promise
28
  return promise;
29
};

1
function Axios(instanceConfig) {
2
  this.defaults = instanceConfig;
3
  this.interceptors = {
4
    request: new InterceptorManager(), // 请求拦截
5
    response: new InterceptorManager() // 响应拦截
6
  };
7
}

1
// 拦截器的初始化 其实就是一组钩子函数
2
function InterceptorManager() {
3
  this.handlers = [];
4
}
5

6
// 调用拦截器实例的use时就是往钩子函数中push方法
7
InterceptorManager.prototype.use = function use(fulfilled, rejected) {
8
  this.handlers.push({
9
    fulfilled: fulfilled,
10
    rejected: rejected
11
  });
12
  return this.handlers.length - 1;
13
};
14

15
// 拦截器是可以取消的，根据use的时候返回的ID，把某一个拦截器方法置为null
16
// 不能用 splice 或者 slice 的原因是 删除之后 id 就会变化，导致之后的顺序或者是操作不可控
17
InterceptorManager.prototype.eject = function eject(id) {
18
  if (this.handlers[id]) {
19
    this.handlers[id] = null;
20
  }
21
};
22

23
// 这就是在 Axios的request方法中 中循环拦截器的方法 forEach 循环执行钩子函数
24
InterceptorManager.prototype.forEach = function forEach(fn) {
25
  utils.forEach(this.handlers, function forEachHandler(h) {
26
    if (h !== null) {
27
      fn(h);
28
    }
29
  });
30
};

1
var transformData = require('./transformData');
2

3
// 取消请求的异常处理
4
function throwIfCancellationRequested(config) {
5
  if (config.cancelToken) {
6
    config.cancelToken.throwIfRequested();
7
  }
8
}
9

10
module.exports = function dispatchRequest(config) {
11
  throwIfCancellationRequested(config);
12

13
  // Support baseURL
14
  // config 支持 baseURL 的拼接
15
  if (config.baseURL && !isAbsoluteURL(config.url)) {
16
    config.url = combineURLs(config.baseURL, config.url);
17
  }
18

19
  // Ensure headers exist 处理headers，保证存在
20
  config.headers = config.headers || {};
21

22
  // Transform request data
23
  // 请求数据的转换
24
  config.data = transformData(
25
    config.data,
26
    config.headers,
27
    config.transformRequest
28
  );
29

30
  // headers 的修改
31
  // Flatten headers
32
  config.headers = utils.merge(
33
    config.headers.common || {},
34
    config.headers[config.method] || {},
35
    config.headers || {}
36
  );
37

38
  // adapter 是适配器意思，在axios里，adapter有两种： 1、xhr 2、nodejs的http(https)
39
  // 浏览器环境的 adapter 就是 xhr，稍后会说明 adapter 逻辑
40
  var adapter = config.adapter || defaults.adapter;
41

42
  // 发起请求 promise
43
  return adapter(config).then(function onAdapterResolution(response) {
44
    // 请求成功的回调
45
    throwIfCancellationRequested(config);
46

47
    // Transform response data 响应数据转换
48
    response.data = transformData(
49
      response.data,
50
      response.headers,
51
      config.transformResponse
52
    );
53

54
    return response;
55
  }, function onAdapterRejection(reason) {
56
    // 请求失败的回调
57
    if (!isCancel(reason)) {
58
      throwIfCancellationRequested(config);
59

60
      // Transform response data 响应数据转换
61
      if (reason && reason.response) {
62
        reason.response.data = transformData(
63
          reason.response.data,
64
          reason.response.headers,
65
          config.transformResponse
66
        );
67
      }
68
    }
69
    return Promise.reject(reason);
70
  });
71
};

1
// 方式1
2
const CancelToken = axios.CancelToken;
3
const source = CancelToken.source();
4

5
axios.get('xxxx', {
6
  cancelToken: source.token
7
})
8
// 取消请求 (请求原因是可选的)
9
source.cancel('主动取消请求');
10

11
// 方式二
12
const CancelToken = axios.CancelToken;
13
let cancel;
14

15
axios.get('xxxx', {
16
  cancelToken: new CancelToken(function executor(c) {
17
    cancel = c;
18
  })
19
});
20
cancel('主动取消请求');

1
function CancelToken(executor) {
2
  if (typeof executor !== 'function') {
3
    throw new TypeError('executor must be a function.');
4
  }
5
  // 在 CancelToken 上定义一个 pending 状态的 promise ，将 resolve 回调赋值给外部变量 resolvePromise
6
  var resolvePromise;
7
  this.promise = new Promise(function promiseExecutor(resolve) {
8
    resolvePromise = resolve;
9
  });
10

11
  var token = this;
12
  // 立即执行 传入的 executor函数，将真实的 cancel 方法通过参数传递出去。
13
  // 一旦调用就执行 resolvePromise 即前面的 promise 的 resolve，就更改promise的状态为 resolve。
14
  // 那么xhr中定义的 CancelToken.promise.then方法就会执行, 从而xhr内部会取消请求
15
  executor(function cancel(message) {
16
    // 判断请求是否已经取消过，避免多次执行
17
    if (token.reason) {
18
      return;
19
    }
20
    token.reason = new Cancel(message);
21
    resolvePromise(token.reason);
22
  });
23
}
24

25
CancelToken.source = function source() {
26
  // source 方法就是返回了一个 CancelToken 实例，与直接使用 new CancelToken 是一样的操作
27
  var cancel;
28
  var token = new CancelToken(function executor(c) {
29
    cancel = c;
30
  });
31
  // 返回创建的 CancelToken 实例以及取消方法
32
  return {
33
    token: token,
34
    cancel: cancel
35
  };
36
};

1
if (config.cancelToken) {
2
    config.cancelToken.promise.then(function onCanceled(cancel) {
3
        if (!request) {
4
            return;
5
        }
6
        // 取消请求
7
        request.abort();
8
        reject(cancel);
9
    });
10
}