关于wx.request的封装

最近打算自己做个小程序，也在不断学习微信小程序官方文档。然而在小程序中网络请求是也是非常重要的一部分，但是一个应用中会有许多的请求，所以需要对一个请求做一些拦截，于是就像对wx.request方法做一个分装方便使用。

封装之前先看下微信小程序官方的 wx.request 方法使用。
其实官方的请求方法很简单, 就是 wx.request(options) 其中options包含了很多的指定参数。

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success: function(res) {
    console.log(res.data)
  }
})

基于我在想如何封装一个方便自己使用的请求方法呢，主要的考虑点如下：

1. 请求可以统一拦截处理；
2. 能添加统一公共的请求体参数，例如一些加密处理等；
3. 请求头部添加公共参数；
4. 请求统一处理部分。

具体实现步骤

1. 为了习惯使用封装一个Fetch类
2. 添加请求Header、状态码处理、请求结果处理。

class Fetch {
    constructor({
        processAuthorizationHeader = () => {},
        processHttpStatusCode = defaultHttpStatusCode,
        processResultHandle = noop
    }) {
        this.processAuthorizationHeader = processAuthorizationHeader;
        this.processHttpStatusCode = processHttpStatusCode;
        this.processResultHandle = processResultHandle;
    }

    fetch(opts) {
        let {
            url,
            data = {},
            header = {},
            method = 'POST', // 有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
            dataType = 'json',
            responseType = 'text',
            complete = noop,
            noStatus = true, // 默认不显示loading
            mask = false, // 不显示遮罩
            loadingText,
        } = opts;
        const self = this;
        // loading icon
        if (!noStatus) {
            wx.showLoading({
                title: loadingText || '加载中…',
                mask: mask
            })
        }

        // 请求头设置
        header = Object.assign({}, this.getUserAuthorizationHeader(), header);

        return new Promise((resolve, reject) => {
            wx.request({
                url,
                data,
                header,
                method,
                dataType,
                responseType,
                complete,
                success: (res) => {
                    wx.hideLoading();
                    // 请求状态码处理
                    const httpStatusCode = res.statusCode;
                    if (!self.processHttpStatusCode(httpStatusCode)) {
                        return reject();
                    }

                    // 请求数据过滤(data默认为json格式)
                    if (typeof res.data === 'string') {
                        try {
                            res.data = JSON.parse(res.data);
                        } catch (e) {}
                    }

                    // 统一添加请求处理
          self.processResultHandle(res) && resolve(res.data);
                },
                fail: (res) => {
                    wx.hideLoading();
                    wx.showToast({
                        title: '网络异常',
                        duration: 1200
                    });
                    reject(res);
                }
            });
        })
    }
}

// 请求默认处理方法
function defaultHttpStatusCode(statusCode) {
    if (statusCode === 200) {
        return true;
  }
  wx.showToast({
    title: '请求异常',
    icon: 'none',
  })
    return;
}

// 空方法
function noop() {
    return true;
}

export default Fetch;

使用方式

1. 实例化一个Fetch类
2. 将实例化的对象挂到wx.fetch下面，这样就可以通过wx.fetch的方式处理做请求。

export const myFetch = new Fetch({
  processAuthorizationHeader() {
    return {
      'usercode': wx.getStorageSync('usercode'),
    }
  },
  processHttpStatusCode(statusCode) {
    if (statusCode === 200) {
      return true;
    } else {
      wx.showToast({
        title: '服务器错误',
        icon: 'none',
        duration: 2000
      })
      return false;
    }
  },
  processResultHandle(res) {
    if (+res.data.code === 200) {
      return true;
    } else if (+res.data.code === 401) { // 重新登录
      wx.redirectTo({
        url: '/pages/login/login'
      })
      return false;
    } else { // 错误异常
      wx.showToast({
        title: res.data.msg,
        icon: 'none',
        duration: 2000
      })
      return false;
    }
  }
})

wx.fetch = myFetch.fetch.bind(myFetch); // 将实例化的对象挂到wx.fetch下