js设计模式--适配器模式--生产实践 axios

　　适配器模式实践：axios

　　axios本身就用到了适配器模式，他的兼容方案值得学习和借鉴。

　　axios的强大之处，在于它不仅仅局限于浏览器端的库，在Node 环境下，也照样好使，axios完美地磨平了两种环境下api的调用差异 ，靠的正是对适配器模式的灵活运用。

　　在axios的核心逻辑中，实际上派发请求的是 dispatchRequest方法。这个方法主要做了两件事，

1. 数据转换，转换请求体/响应体，可以理解为数据层面的适配器
2. 调用适配器

　　调用适配器的逻辑：

// 若用户未手动配置适配器，则使用默认的适配器
var adapter = config.adapter || defaults.adapter;
// dispatchRequest方法的末尾调用的是适配器方法
return adapter(config).then(
  function onAdapterResolution(response) {
    // 请求成功的回调
    throwIfCancellationRequested(config);
    // 转换响应体
    response.data = transformData(
      response.data,
      response.headers,
      config.transformResponse
    );
    return response;
  },
  function onAdapterRejection(reason) {
    // 请求失败的回调
    if (!isCancel(reason)) {
      throwIfCancellationRequested(config);
      // 转换响应体
      if (reason && reason.response) {
        reason.response.data = transformData(
          reason.response.data,
          reason.response.headers,
          config.transformResponse
        );
      }
    }
    return Promise.reject(reason);
  }
);

　　在实际开发中，我们默认适配器的频率更高一些。默认适配器在 axios/lib/default.js 里面通过 getDefaultAdapter 方法来获取的。

function getDefaultAdapter() {
  var adapter;
  // 判断当前是否是node环境
  if (
    typeof process !== "undefined" &&
    Object.prototype.toString.call(process) === "[object process]"
  ) {
    // 如果是node环境，调用node专属的http适配器
    adapter = require("./adapters/http");
  } else if (typeof XMLHttpRequest !== "undefined") {
    // 如果是浏览器环境，调用基于xhr的适配器
    adapter = require("./adapters/xhr");
  }
  return adapter;
}
// http 中的适配器
module.exports = function httpAdapter(config) {
    return new Promise(function dispatchHttpRequest(resolvePromise, rejectPromise) {
      // 具体逻辑
    }
}
// xhr 中的适配器
module.exports = function xhrAdapter(config) {
    return new Promise(function dispatchXhrRequest(resolve, reject) {
      // 具体逻辑
    }
}

　　http 和 xhr 两个适配器 1. 入参都是 config      2.出参都是 Promise

　　axios 发起跨平台请求时，不仅调用的接口名时同一个，入参和出参的格式都只要掌握同一套。