axios源码系列三-默认配置和取消请求

前言

这应该是一个大多数都常用的请求库, 因为它可以支持多种配置, 跨平台实现, 返回 promise 进行链式调用. 完全过一遍源码可以提升自己对请求库的理解知识

axios 源码系列(一) — 目录结构和工具函数
axios 源码系列(二) — 适配器内部
axios 源码系列(三) — 默认配置和取消请求
axios 源码系列(四) — Axios 和 dispatchRequest 与拦截器

默认配置

axios/lib/defaults.js

这个 Axios 库的默认参数配置

var utils = require('./utils');
var normalizeHeaderName = require('./helpers/normalizeHeaderName');

var DEFAULT_CONTENT_TYPE = {'Content-Type': 'application/x-www-form-urlencoded'};

function setContentTypeIfUnset(headers, value) {if (!utils.isUndefined(headers) && utils.isUndefined(headers['Content-Type'])) {headers['Content-Type'] = value;
  }
}

function getDefaultAdapter() {
  var adapter;
  if (typeof XMLHttpRequest !== 'undefined') {
    // For browsers use XHR adapter
    adapter = require('./adapters/xhr');
  } else if (typeof process !== 'undefined' && Object.prototype.toString.call(process) === '[object process]') {
    // For node use HTTP adapter
    adapter = require('./adapters/http');
  }
  return adapter;
}

这里只有四件事:

• 引入了工具库和解析头部名函数
• 设置默认 Content-Type 为浏览器默认的编码格式
• 定义设置 headers 内值为空的 Content-Type 对应值的方法
• 根据宿主环境获取对应的adapters

里面解析头部名函数的源码如下

axios/lib/helpers/normalizeHeaderName.js

过滤得出是否不同大小写字母的等价请求头, 是的话则设置新的请求头移除旧的请求头

var utils = require('../utils');

module.exports = function normalizeHeaderName(headers, normalizedName) {utils.forEach(headers, function processHeader(value, name) {if (name !== normalizedName && name.toUpperCase() === normalizedName.toUpperCase()) {headers[normalizedName] = value;
      delete headers[name];
    }
  });
};

这是暴露出去的对象

var defaults = {adapter: getDefaultAdapter(),

  transformRequest: [function transformRequest(data, headers) {normalizeHeaderName(headers, 'Accept');
    normalizeHeaderName(headers, 'Content-Type');
    if (utils.isFormData(data) ||
      utils.isArrayBuffer(data) ||
      utils.isBuffer(data) ||
      utils.isStream(data) ||
      utils.isFile(data) ||
      utils.isBlob(data)
    ) {return data;}
    if (utils.isArrayBufferView(data)) {return data.buffer;}
    if (utils.isURLSearchParams(data)) {setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
      return data.toString();}
    if (utils.isObject(data)) {setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
      return JSON.stringify(data);
    }
    return data;
  }],

  transformResponse: [function transformResponse(data) {
    /*eslint no-param-reassign:0*/
    if (typeof data === 'string') {
      try {data = JSON.parse(data);
      } catch (e) {/* Ignore */}
    }
    return data;
  }],

  /**
   * A timeout in milliseconds to abort a request. If set to 0 (default) a
   * timeout is not created.
   */
  timeout: 0,

  xsrfCookieName: 'XSRF-TOKEN',
  xsrfHeaderName: 'X-XSRF-TOKEN',

  maxContentLength: -1,

  validateStatus: function validateStatus(status) {return status >= 200 && status < 300;}
};

defaults.headers = {
  common: {'Accept': 'application/json, text/plain, */*'}
};

utils.forEach(['delete', 'get', 'head'], function forEachMethodNoData(method) {defaults.headers[method] = {};});

utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {defaults.headers[method] = utils.merge(DEFAULT_CONTENT_TYPE);
});

module.exports = defaults;

主要提供了几个默认配置

取消请求

axios/lib/cancel/Cancel.js

/**
 * A `Cancel` is an object that is thrown when an operation is canceled.
 *
 * @class
 * @param {string=} message The message.
 */
function Cancel(message) {this.message = message;}


Cancel.prototype.toString = function toString() {return 'Cancel' + (this.message ? ':' + this.message : '');
};

Cancel.prototype.__CANCEL__ = true;

module.exports = Cancel;

创建 Cancel 的构造函数, 表明取消某个请求, 提供一句取消信息和标记

axios/lib/cancel/CancelToken.js

var Cancel = require('./Cancel');

/**
 * A `CancelToken` is an object that can be used to request cancellation of an operation.
 *
 * @class
 * @param {Function} executor The executor function.
 */
function CancelToken(executor) {if (typeof executor !== 'function') {throw new TypeError('executor must be a function.');
  }

  var resolvePromise;
  this.promise = new Promise(function promiseExecutor(resolve) {resolvePromise = resolve;});

  var token = this;
  executor(function cancel(message) {if (token.reason) {
      // Cancellation has already been requested
      return;
    }

    token.reason = new Cancel(message);
    resolvePromise(token.reason);
  });
}

/**
 * Throws a `Cancel` if cancellation has been requested.
 */
CancelToken.prototype.throwIfRequested = function throwIfRequested() {if (this.reason) {throw this.reason;}
};

/**
 * Returns an object that contains a new `CancelToken` and a function that, when called,
 * cancels the `CancelToken`.
 */
CancelToken.source = function source() {
  var cancel;
  var token = new CancelToken(function executor(c) {cancel = c;});
  return {
    token: token,
    cancel: cancel
  };
};

module.exports = CancelToken;

创建 CancelToken 对象用于取消请求的操作:

• 定义新的 Promise 并将改变状态的触发时机传递到外部

• 执行传入的回调函数参数

  • 如果已经含有 reason 属性代表已经发出取消请求的操作, 则中断操作
  • 否则创建新的 Cancel 对象并且改变 Promise 状态返回该对象

原型上绑定 throwIfRequested 方法, 如果实例已经取消可以直接抛出取消信息

构造函数上绑定 source 方法, 调用之后可以返回新的 CancelToken 实例和 cancel 方法

axios/lib/cancel/isCancel.js

module.exports = function isCancel(value) {return !!(value && value.__CANCEL__);
};

通过是否拥有 __CANCEL__ 属性而得知某次请求是否已经取消了.

示例

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {cancelToken: source.token}).catch(function(thrown) {if (axios.isCancel(thrown)) {console.log('Request canceled', thrown.message);
  } else {// 处理错误}
});

axios.post('/user/12345', {name: 'new name'}, {cancelToken: source.token})

// 取消请求（message 参数是可选的）source.cancel('Operation canceled by the user.');

或者

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// cancel the request
cancel();