使用 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方法！