【微信小程序】Promise封装请求

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

Promise对象有以下两个特点：

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

缺点：

Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

一、在utils文件夹下创建一个tools.js,代码如下：

/**
 * 工具类
 */
// 服务器地址
const hostApi = ''

/**
 * @封装http请求方法
 * @params 形参，是一个对象
 * {
 *   url: '',           //接口，必传
 *   method: '',       //方法，默认为GET，可选
 *   data: ''         //数据，可选
 * }
 */
const http = (params) => {
  // 返回Primise对象
  return new Promise((resolve, reject) => {
    wx.showLoading({
      title: '加载中',
      mask: true
    })
    let method = params.method || 'GET'
    const SUCCESS_STATUS = 200
    wx.request({
      url: hostApi + params.url,
      method: method,
      data: params.data || {},
      header: {
        'content-type': Object.is(method, 'GET') ? 'application/json' : 'application/x-www-form-urlencoded'
      },
      success: res => {
        if (Object.is(res.statusCode, SUCCESS_STATUS)) {
          wx.hideLoading()
          resolve(res.data)
        }
      },
      fail: err => {
        wx.hideLoading()
        showError()
        reject(err)
      }
    })
  })
}

/**
 * 弹窗提示网络错误
 */
function showError() {
  wx.showToast({
    title: '加载失败',
    icon: 'none',
    duration: 2000,
    mask: true
  })
}

module.exports = {
  http
}

2、在小程序app.js里配置全局函数

//app.js
const req = require('/utils/tools.js')  //引入创建的tools.js文件

App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  },
  api: {  //封装接口
    
  },
  http: {   //配置全局变量
    req: req.http
  }
})

3、在项目代码中调用方法

app.http.req(params).then(res => {
  //返回结果的处理逻辑
  console.log(res)
  ...
})