微信小程序幾乎所有的(de) API 都是(shì)采用回調的(de)形式，很容易陷入“回調地(dì / de)獄”，完全享受不(bù)到(dào)“現代化”的(de)異步編程 Promise、async/await 所帶來(lái)的(de)優勢。

我們可以(yǐ)對微信小程序的(de) 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]) => {
  // ...
})
複制代碼

進一步的(de)，我們可以(yǐ)将一些常用的(de) API 進行封裝：

// utils/promisify.js

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

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

// ...
複制代碼

在(zài)生産中，推薦直接使用 npm 包 miniprogram-api-promise，其原理也(yě)是(shì)使用 Promise 對 API 進行了(le／liǎo)一次封裝：

源碼見 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 是(shì)微信小程序最常用的(de) API 之(zhī)一，請求的(de)參數較多，請求結束後的(de)操作又是(shì)通過回調函數來(lái)完成的(de)，多有不(bù)便。

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

// utils/request.js

/**
 * promisify wx.request
 * @param {String} baseURL 域名
 * @param {String} url 請求路徑
 * @param {Object} data 請求參數
 * @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,
})
複制代碼

爲(wéi / wèi)了(le／liǎo)便于(yú)管理，我們往往會将項目中使用到(dào)的(de) HTTP 請求放到(dào)一起進行維護：

// 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)