## 用ES6Promise對象對wx.request進行封裝
描述:wx.request是微信小程序提供的Api請求方法,success是請求成功的回調,fail是請求失敗的回調,
我們用es6的Promise對象對該方法進行封裝。
好處:方便我們對請求的異步處理,減少了我們的業務代碼。
### 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();
//具體調用
Test() {
let self = this;
//此處調用Api類里面定義的具體業務請求方法
let xxxPromise = api.getMyTestData(//此處傳入具體參數).then( res => {
console.log("請求成功返回結果:", res);
//執行你的業務邏輯代碼
//
//
}).catch( res => {
console.error("請求失敗返回結果:", res);
});
//此處我需要等待上述請求執行成功后才能做其他處理的話就這樣寫
xxxPromise.then(() =>{
//會等上面請求執行完再執行
//
//
});
}
~~~