wx.request 高级封装

实现思路

并发处理

研究封装wx.request,发现wx.request在1.4.0版本以上同时请求数量最多为10个，多余的请求会排队处理，而1.4.0及以下版本，wx.request同时请求数量最多为5个，多余的请求会报错，所以需要做并发的兼容处理。

Promise

使用promise链式来代替回调函数。

/**
 * promise请求
 * 参数：参考wx.request
 * 返回值：[promise]res
 */
function requestP(options = {}) {
  const {
    success,
    fail,
  } = options;

  return new Promise((res, rej) => {
    wx.request(Object.assign(
      {},
      options,
      {
        success: res,
        fail: rej,
      },
    ));
  });
}

精简返回值

当请求返回并丢给一大堆数据时，直接取想要的那一部分数据就好。

return new Promise((res, rej) => {
  wx.request(Object.assign(
    {},
    options,
    {
      success(r) {
        res(r.data);  // 这里只取data
      },
      fail: rej,
    },
  ));
});

但是需要注意，仅仅取data部分，这时候默认所有success都是成功的，其实不然，wx.request是一个基础的api，fail只发生在系统和网络层面的失败情况，比如网络丢包、域名解析失败等等，而类似404、500之类的接口状态，依旧是调用success，并体现在statusCode上。

从业务上讲，我只想处理json的内容，并对json当中的相关状态进行处理；如果一个接口返回的不是约定好的json，而是类似404、500之类的接口异常，我统一当成接口/网络错误来处理，就像jquery的ajax那样。

也就是说，如果我不对statusCode进行区分，那么包括404、500在内的所有请求结果都会走requestP().then，而不是requestP().catch。

/**
 * 判断请求状态是否成功
 * 参数：http状态码
 * 返回值：[Boolen]
 */
function isHttpSuccess(status) {
  return status >= 200 && status < 300 || status === 304;
}

isHttpSuccess用来决定一个http状态码是否判为成功，于是结合requestP，可以这么来用：

return new Promise((res, rej) => {
  wx.request(Object.assign(
    {},
    options,
    {
      success(r) {
        const isSuccess = isHttpSuccess(r.statusCode);
        if (isSuccess) {  // 成功的请求状态
          res(r.data);
        } else {
          rej({
            msg: `网络错误:${r.statusCode}`,
            detail: r
          });
        }
      },
      fail: rej,
    },
  ));
});

登录&sessionId

判断是否要登录验证和通过header的方式来携带sessionId，以及登录过期自动登录。

代码链接

wxRequestEncapsulation

参考资料

研究公司已封装好的request代码

1. 对低版本请求并发进行了处理。
2. 独立封装了登录逻辑。（大致思路是主动轮询续期）

mp-req (GitHub: https://github.com/wxlite-plus/mp-req)

1. 简化respone：简化返回的数据信息，只保留业务数据；
2. method替代url：使用js api的书写方式来替代直接书写url的方式；
3. 自动登录：登录态过期自动重新登录，过程对开发者透明。（大致思路是被动按需续期）
4. promisify：支持promise，替代callback的方式
   但是没有做低版本的请求并发兼容。

日志

2019.12.17

根据公司封装代码和mp-req的各自优点，将两者结合下，再封装一个request。主要参考的是mp-req，但加了对低版本的并发兼容，算是对mp-req的完善吧。
代码链接：https://gitee.com/tianyu0-0/wxRequestEncapsulation

2019.12.18

request封装基本完成，登录逻辑可以在优化下。

感谢

以下是我到网上查找的一些文章，对本人有较大启发，在此十分感谢！

1. 一个通用request的封装
2. mp-req

责任声明

仅供学习参考，请勿用于商业，如有问题，概不负责。