如(rú)何使小程序請求優雅化 解決繁瑣的小程序會話管理 - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn),軟件還是小程序,都要直接或間接能為您産生價值,我們在追求其視覺表現的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網站(zhàn)成為營銷工具,讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持!

如(rú)何使小程序請求優雅化 解決繁瑣的小程序會話管理

發表時間:2021-1-5

發布人:葵宇科技

浏覽次數:106

小程序原生的wx.request請求代碼量繁瑣,且容易造成回調地獄,不利于維護。故用Promise封裝,大大減少(shǎo)代碼量,提高可(kě)維護性。

一、引入登錄态管理的網絡請求組件weRequest

公司裡一位大佬開發的登錄态管理的網絡請求組件weRequest,解決繁瑣的小程序會話管理,具體可(kě)以移步學習。引入後按照文(wén)檔指引配置request.js。

二、封裝包裹請求函數

  • 1.引入第一步的配置文(wén)件request.ts
import weRequest from '../lib/request'
複制代碼
  • 2.封裝包裹函數(注意,以下(xià)是以ts編寫,可(kě)以根據需要改為js)
/**
 * 包裹函數
 * @param opts weRequest參數
 * @param data 接口參數
 * @param url cgi路(lù)徑
 * @param reqOpts 請求方式,默認為POST,可(kě)選
 */
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 //當為true時,請求該cgi會有loading       
    }))
}
export default {
    // 把請求export出去,比如(rú)
    saveTest(opts: RequestBody.saveTest): Promise<ResponseBody.saveTest> {
        return reqWrapper(opts, url , true)
    },
}
複制代碼

三、小程序頁面中(zhōng)使用

  • 1.在對應的頁面引入第二步的文(wén)件,比如(rú)api.ts
import API from "../../api";
複制代碼
  • 2.請求格式如(rú)下(xià)
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)
        })
    }
})

作者:mton95
來源:掘金
著作權歸作者所有。商(shāng)業(yè)轉載請聯系作者獲得授權,非商(shāng)業(yè)轉載請注明出處。

相關(guān)案例查看更多