使用 async await 封装微信小程序HTTP请求

1. 编写将普通回调函数形式的方法转换为promise方法的promisic方法

 // util.js
 const promisic = function (func) {
     return function (params = {}) {
         return new Promise((resolve, reject) => {
             const args = Object.assign(params, {
                 success: (res) => {
                     resolve(res)
                 },
                 fail: (error) => {
                     reject(error)
                 }
             })
             func(args)
         })
     }
 }

 export {
     promisic
 }

2. 编写Http类封装HTTP请求

 // http.js
 import { promisic } from "./util"
 import { config } from "../config/config"

 /**
  * 使用 async await 封装HTTP请求
  */
 class Http {

     static async request({ url, method='GET', data }) {
         // 将wx.request方法转换成promise方法
         const res = await promisic(wx.request)({
             url: `${config.apiBaseUrl}${url}`,
             method,
             data,
             header: {
                 appkey: config.appkey
             }
         })
         return res.data
     }

 }

 export {
     Http
 }

3. 编写Theme业务类调用封装好的Http请求

// theme.js
import { Http } from "../utils/http"

/**
 * 编写主题请求业务类
 */
class Theme {

    /**
     * 获取首页主题A
     */
    static async getHomeLocationA() {
        return await Http.request({
            url: 'xx/xx/xxx',
            data: {
                names: 't-1'
            }
        })
    }

}

export {
    Theme
}

4. 在page中调用Theme业务类获取首页主题A方法

 // home.js
 import { Theme } from '../../model/theme'

 Page({

   data: {
     topTheme: {}
   },

   async onLoad (options) {
     // 获取首页主题A
     const data = await Theme.getHomeLocationA()
     this.setData({
         topTheme: data[0]
     })
   }

 })

附上目录结构

这样就可以愉快地使用async await形式的Http请求了，彻底摆脱各种callback方法！