API promisify

Almost all apis of wechat small programs are in the form of callback, so it is easy to fall into “callback hell” and completely enjoy the advantages brought by “modern” asynchronous programming Promise and async/await.

We can Promise the API of wechat small program.

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

/ / use
const getBg = getImageInfo(bgUrl)
const getAvatar = getImageInfo(avatarUrl)
Promise.all([getBg, getAvatar]).then(([bg, avatar]) = > {
  // ...
})
Copy the code

Further, we can encapsulate some commonly used apis:

// utils/promisify.js

/** * Network images take effect only after the Download domain name is configured. *@param {String} src 
 */
export const getImageInfo = (src) = > {
  return new Promise((success, fail) = > wx.getImageInfo({ src, success, fail }))
}

/** * Save the image to the system album *@param {Object} options 
 */
export const saveImageToPhotosAlbum = (options) = > {
  return new Promise((success, fail) = >wx.saveImageToPhotosAlbum({ ... options, success, fail })) }// ...
Copy the code

miniprogram-api-promise

In production, it is recommended to use the NPM package miniprogram-apI-Promise directly, which also encapsulates the API using promise:

See source node_modules/miniprogram – API – promise/SRC/promise. Js

npm install --save miniprogram-api-promise
Copy the code
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)
Copy the code

wx.requestencapsulation

Wx. request is one of the most commonly used apis of wechat applet. The request has many parameters, and the operation after the request is completed by callback function, which is quite inconvenient.

Here’s how to wrap the API to support Promise:

// utils/request.js

/**
 * promisify wx.request
 * @param {String} BaseURL domain name *@param {String} Url request path *@param {Object} Data request parameter *@param {String} Method Request 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,
})
Copy the code

Unified management of back-end interfaces

For ease of management, we tend to keep HTTP requests used in projects together:

// 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)
Copy the code
// 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)
Copy the code

Refer to the link

  1. RequestTask | WeChat open document: developers.weixin.qq.com/miniprogram…
  2. API Promise change | WeChat open document: developers.weixin.qq.com/miniprogram…