微信小程序幾乎所有的 API 都是采用回調的形式，很容易陷入“回調地獄”，完全享受不到“現(xiàn)代化”的異步編程 Promise、async/await 所帶來的優(yōu)勢。

我們可以對微信小程序的 API Promise 化。

// 封裝
export const getImageInfo = (src) => {
  return new Promise((success, fail) => wx.getImageInfo({ src, success, fail }))
}

// 使用
const getBg = getImageInfo(bgUrl)
const getAvatar = getImageInfo(avatarUrl)
Promise.all([getBg, getAvatar]).then(([bg, avatar]) => {
  // ...
})
復制代碼

進一步的，我們可以將一些常用的 API 進行封裝：

// utils/promisify.js

/**
 * 獲取圖片信息，網(wǎng)絡圖片需先配置 download 域名才能生效。
 * @param {String} src 
 */
export const getImageInfo = (src) => {
  return new Promise((success, fail) => wx.getImageInfo({ src, success, fail }))
}

/**
 * 保存圖片到系統(tǒng)相冊
 * @param {Object} options 
 */
export const saveImageToPhotosAlbum = (options) => {
  return new Promise((success, fail) => wx.saveImageToPhotosAlbum({ ...options, success, fail }))
}

// ...
復制代碼

在生產中，推薦直接使用 npm 包 miniprogram-api-promise，其原理也是使用 Promise 對 API 進行了一次封裝：

源碼見 node_modules/miniprogram-api-promise/src/promise.js

npm install --save miniprogram-api-promise
復制代碼

import { promisifyAll, promisify } from 'miniprogram-api-promise';

// promisify all wx's api
const wxp = {}
promisifyAll(wx, wxp)
console.log(wxp.getSystemInfoSync())
wxp.getSystemInfo().then(console.log)
wxp.showModal().then(wxp.openSetting())

// compatible usage
wxp.getSystemInfo({success(res) {console.log(res)}})

// promisify single api
promisify(wx.getSystemInfo)().then(console.log)
復制代碼

wx.request 是微信小程序最常用的 API 之一，請求的參數(shù)較多，請求結束后的操作又是通過回調函數(shù)來完成的，多有不便。

下面對該 API 進行封裝，使其支持 Promise：

// utils/request.js

/**
 * promisify wx.request
 * @param {String} baseURL 域名
 * @param {String} url 請求路徑
 * @param {Object} data 請求參數(shù)
 * @param {String} method 請求方法
 */
class Request {
  constructor(params) {
    this.withBaseURL = params.withBaseURL
    this.baseURL = params.baseURL
  }

  get(url, data) {
    return this.request('GET', url, data)
  }

  post(url, data) {
    return this.request('POST', url, data)
  }

  request(method, url, data) {
    return new Promise((resolve, reject) => {
      wx.request({
        method,
        data,
        url: this.withBaseURL ? this.baseURL + url : url,
        header: getApp().globalData.getHeader(),
        success: (res) => resolve(res),
        fail: (err) => reject(err),
      })
    })
  }
}

export default new Request({
  withBaseURL: true,
  baseURL: getApp().globalData.host,
})
復制代碼

為了便于管理，我們往往會將項目中使用到的 HTTP 請求放到一起進行維護：

// apis/user.js
import request from '../utils/request'

export const addUser = (data) => request.post('/user/add', data)
export const getUserList = (data) => request.get('/user/list', data)
export const getUserInfo = (data) => request.get('/user/info', data)
復制代碼

// apis/product.js
import request from '../utils/request'

export const addProduct = (data) => request.post('/product/add', data)
export const getProductList = (data) => request.get('/product/list', data)
export const getProductDetail = (data) => request.get('/product/detail', data)