小程序原生的wx.request請(qǐng)求代碼量繁瑣，且容易造成回調(diào)地獄，不利于維護(hù)。故用Promise封裝，大大減少代碼量，提高可維護(hù)性。

一、引入登錄態(tài)管理的網(wǎng)絡(luò)請(qǐng)求組件weRequest

公司里一位大佬開發(fā)的登錄態(tài)管理的網(wǎng)絡(luò)請(qǐng)求組件weRequest,解決繁瑣的小程序會(huì)話管理,具體可以移步學(xué)習(xí)。引入后按照文檔指引配置request.js。

二、封裝包裹請(qǐng)求函數(shù)

• 1.引入第一步的配置文件request.ts

import weRequest from '../lib/request'
復(fù)制代碼

• 2.封裝包裹函數(shù)(注意，以下是以ts編寫，可以根據(jù)需要改為js)

/**
 * 包裹函數(shù)
 * @param opts weRequest參數(shù)
 * @param data 接口參數(shù)
 * @param url cgi路徑
 * @param reqOpts 請(qǐng)求方式，默認(rèn)為POST，可選
 */
let reqWrapper = (data: object, url: string, reqLoad?: boolean, reqOpts?: string) => {
    let param = Object.assign({}, data)
    return weRequest.request(Object.assign({}, {
        url: url,
        data: param,
        method: reqOpts? reqOpts : 'POST',
        showLoading: reqLoad? reqLoad : false //當(dāng)為true時(shí)，請(qǐng)求該cgi會(huì)有l(wèi)oading       
    }))
}
export default {
    // 把請(qǐng)求export出去，比如
    saveTest(opts: RequestBody.saveTest): Promise<ResponseBody.saveTest> {
        return reqWrapper(opts, url , true)
    },
}
復(fù)制代碼

三、小程序頁面中使用

• 1.在對(duì)應(yīng)的頁面引入第二步的文件，比如api.ts

import API from "../../api";
復(fù)制代碼

• 2.請(qǐng)求格式如下

Page({
    data: {
        isLoading: true
    },

    onLoad(query: any) {
        loading = new Loading(this);
        this.test()
    },

    // 獲取品牌信息
    test: function () {
        let self = this;
        let entryData: RequestBody = {
            
        }
        API.getTest(entryData).then((res: any) => {
            let getData = http://www.wxapp-union.com/res.data;
            self.setData({
                
            })
        }).catch((err: string) => {
            console.error(err)
        })
    }
})