用ES6Promise對象對wx.request進行封裝
描述:wx.request是微信小程序提供的Api請求方法,success是請求成功的回調,fail是請求失敗的回調,
咱們用es6的Promise對象對該方法進行封裝。
好處:方便咱們對請求的異步處理,減小了咱們的業務代碼。es6
1.封裝底層代碼編程
//wx.request請求數據 requestData(method, url, data, header) { if (!url || !method) return; return new Promise((resolve, reject) => { wx.request({ url: url, data: data || {}, header: header || {}, method: method.toLocaleUpperCase(), success: function (res) { resolve(res); }, fail: function (res) { reject(res.errMsg || '發送網絡錯誤(http fail)'); } }); }); }
2.將咱們小程序全部api請求進行模塊化編程,建立一個api.js,定義一個Api類進行2次封裝小程序
class Api { constructor() { //此處寫一些默認取值,例如拿storage裏面的數據 //例如wx.getStorageSync("..."); } //調用示例 getMyTestData(code) { let self = this; //定義api請求地址 let url = ''; let postData = { //向api發送的數據 }; //調用上面封裝好的wx.request請求,返回了一個Promise對象 return self.requestData('post', url, postData); } } //咱們將定義的Api類導入出去,而後咱們小程序內其它js能夠引入該js調用了 module.exports = { Api: Api }
3.具體業務js的調用方式
//導入咱們定義的Api類
import { Api } from '../../utils/api.js'; //具體路徑根據本身項目結構來,填寫相對路徑
//定義一個變量獲得Api類的實例,而後咱們就能夠經過api這個對象去請求數據了
const api = new Api();微信小程序
//具體調用api
Test() { let self = this; //此處調用Api類裏面定義的具體業務請求方法 let xxxPromise = api.getMyTestData(//此處傳入具體參數).then( res => { console.log("請求成功返回結果:", res); //執行你的業務邏輯代碼 // // }).catch( res => { console.error("請求失敗返回結果:", res); }); //此處我須要等待上述請求執行成功後才能作其餘處理的話就這樣寫 xxxPromise.then(() =>{ //會等上面請求執行完再執行 // // }); }