小程序之使用promise封装wx.request

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

小程序的wx.request是一个异步的请求，剥夺了函数的return能力，在请求的时候需要传入一个回调函数的参数，在嵌套回调的时候很容易发生回调地狱。

维护的成本高，代码不够简洁

promise把函数的回调功能还回来了，可以使用将请求回来的结果直接return 也可以使用一个变量接收，这个变量可以传到代码的任何地方进行使用，在需要使用数据的地方使用.then()获取数据，也可以结合async/await获取数据进行下一步的操作

接下来看代码

import {
  config
} from '../config.js'
const tips = {
  1: '抱歉，出现了一个错误',
  1005: 'appkey无效，请前往www.7yue.pro申请',
  3000: '期刊不存在'
}
// 在request中使用对象的方式写参数（{url, data, method}），那么在调取的地方也可以使用这种方式传参
class HTTP {
  request({
    url,
    data = {},
    method = 'GET'
  }) {
    // promise接收两个参数 resolve reject
    return new Promise((resolve, reject) => {
      this._request(url, resolve, reject, data, method)
    })
  }

  _request(url, resolve, reject, data = {}, method = 'GET') {
    wx.request({
      url: config.api_base_url + url,
      data: data,
      method: method,
      header: {
        'content-type': 'application/json',
        'appkey': config.appkey
      },
      success: (res) => {
        let code = res.statusCode.toString();
        if (code.startsWith('2')) {
          // 返回code以2开头
          resolve(res.data)
        } else {
          reject()
          let error_code = res.data.error_code
          this._show_error(error_code)
        }
      },
      fail: (err) => {
        reject()
        this._show_error(1)
      }
    })
  }

  _show_error(error_code) {
    if (!error_code) {
      error_code = 1;
    }
    const tip = tips[error_code]
    wx.showToast({
      title: tip ? tip : tips[1],
      icon: 'none',
      duration: 2000 
    })
  }
}

export {
  HTTP
}