js设计模式--结构型--适配器模式

　　结构型： 适配器模式

　　适配器模式：通过把一个类的接口变换成客户端所期待的另一种接口，通常解决不兼容问题。

　　具体的业务实现场景，小明用 fetch 封装了一个 http 的方法库：

export default class HttpUtils {
  // get方法
  static get(url) {
    return new Promise((resolve, reject) => {
      // 调用fetch
      fetch(url)
        .then((response) => response.json())
        .then((result) => {
          resolve(result);
        })
        .catch((error) => {
          reject(error);
        });
    });
  }
  // post方法，data以object形式传入
  static post(url, data) {
    return new Promise((resolve, reject) => {
      // 调用fetch
      fetch(url, {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/x-www-form-urlencoded",
        },
        // 将object类型的数据格式化为合法的body参数
        body: this.changeData(data),
      })
        .then((response) => response.json())
        .then((result) => {
          resolve(result);
        })
        .catch((error) => {
          reject(error);
        });
    });
  }

  // body请求体的格式化方法
  static changeData(obj) {
    var prop,
      str = "";
    var i = 0;
    for (prop in obj) {
      if (!prop) {
        return;
      }
      if (i == 0) {
        str += prop + "=" + obj[prop];
      } else {
        str += "&" + prop + "=" + obj[prop];
      }
      i++;
    }
    return str;
  }
}
// 定义目标url 地址
const url = "www.xxx";
// 定义 post 参数
const params = {};
// 发起 post 请求
const postResponse = (await HttpUtils.post(URL, params)) || {};
// 发起get请求
const getResponse = (await HttpUtils.get(URL)) || {};

　　然后，老板看了 这个 HttpUtils 方法库，觉得很好用，让小明把公司的业务网络请求都迁移到 HttpUtils 上面，但是公司的网络请求库，是基于XMLHttpRequest的

大概就是下面这个样子:

function Ajax(type, url, data, success, failed) {
  // 创建ajax对象
  var xhr = null;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  // (此处省略一系列的业务逻辑细节)
  var type = type.toUpperCase();
  // 识别请求类型
  if (type == "GET") {
    if (data) {
      xhr.open("GET", url + "?" + data, true); //如果有数据就拼接
    }
    // 发送get请求
    xhr.send();
  } else if (type == "POST") {
    xhr.open("POST", url, true);
    // 如果需要像 html 表单那样 POST 数据，使用 setRequestHeader() 来添加 http 头。
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // 发送post请求
    xhr.send(data);
  }
  // 处理返回数据
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        success(xhr.responseText);
      } else {
        if (failed) {
          failed(xhr.status);
        }
      }
    }
  };
}
// 调用方法
// 发送get请求
Ajax('get', url地址, post入参, function(data){
    // 成功的回调逻辑
}, function(error){
    // 失败的回调逻辑
})

　　这种情况，接口名称不同，入参方式不同，这要改到什么时候呢！

　　针对这种情况，就应该想到专门 抹平差异的 适配器模式。

// ajax 适配器，入参和旧接口的保持一致
async function AjaxAdapter(type, url, data, success, failed) {
  const type = type.toUpperCase();
  let result;
  try {
    // 实际的请求全部由新接口发起
    if (type === "GET") {
      result = (await HttpUtils.get(url)) || {};
    } else if (type === "POST") {
      result = (await HttpUtils.post(url, data)) || {};
    }
    // 假设请求成功对应的状态码是1
    result.statusCode === 1 && success
      ? success(result)
      : failed(result.statusCode);
  } catch (error) {
    // 捕捉网络错误
    if (failed) {
      failed(error.statusCode);
    }
  }
}
// 用适配器 适配旧的 ajax 方法，实现了新旧接口的无缝链接
async function Ajax(type, url, data, success, failed){
    await AjaxAdapter(type, url, data, success, failed);
}