小程序開(kāi)發(fā)中都會(huì)調(diào)用后端工程師開(kāi)發(fā)的API硬萍，小程序的開(kāi)發(fā)文檔提供了相對(duì)實(shí)用的APIwx.request()扼仲，但是在開(kāi)發(fā)的過(guò)程中菊值，又遇到了一些問(wèn)題，在小程序的項(xiàng)目開(kāi)發(fā)時(shí)刻剥，調(diào)用的API不止一個(gè)遮咖，同一個(gè)API調(diào)用不止一次。同時(shí)造虏，對(duì)于調(diào)用的API的管理也十分復(fù)雜御吞，這樣的背景下，對(duì)wx.request()方法的封裝變得尤為重要漓藕。
本文的解決思路為：將API的路徑和方法放在一個(gè)文件里面方便管理;封裝小程序的request方法陶珠，并返回promise處理(ES6)。
一享钞、units文件夾中新建request.js文件
// utils/request.js
//封裝request
let apiRequest = (url, method, data, header) => { //接收所需要的參數(shù)揍诽，如果不夠還可以自己自定義參數(shù)
let promise = new Promise(function (resolve, reject) {
wx.showNavigationBarLoading() //在標(biāo)題欄中顯示加載
wx.request({
url: url,
data: data ? data : null,
method: method,
header: header ? header : { 'content-type': 'application/x-www-form-urlencoded' },
complete: function () {
wx.hideNavigationBarLoading(); //完成停止加載
wx.stopPullDownRefresh(); //停止下拉刷新
},
success: function (res) {
//接口調(diào)用成功
resolve(res.data); //根據(jù)業(yè)務(wù)需要resolve接口返回的json的數(shù)據(jù)
},
fail: function (res) {
wx.showModal({
showCancel: false,
confirmColor: '#1d8f59',
content: '數(shù)據(jù)加載失敗，請(qǐng)檢查您的網(wǎng)絡(luò)栗竖，點(diǎn)擊確定重新加載數(shù)據(jù)!',
success: function (res) {
if (res.confirm) {
apiRequest(url, method, data, header);
}
}
});
wx.hideLoading();
}
})
});
return promise; //注意暑脆，這里返回的是promise對(duì)象
}
export default apiRequest;
二、units文件夾中新建api.js文件
import apiRequest from './request.js';
const HOST = 'http://www.xx.com';
const API_LIST = {
all: {
method: 'POST',
url: '/e/extend/api/type.php'
},
}
/*
多參數(shù)合并
*/
function MyHttp(defaultParams, API_LIST) {
let _build_url = HOST;
let resource = {};
for (let actionName in API_LIST) {
let _config = API_LIST[actionName];
resource[actionName] = (pdata) => {
let _params_data = pdata;
return apiRequest(_build_url + _config.url, _config.method, _params_data, {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8;Authorization;'
});
}
}
return resource;
}
const Api = new MyHttp({}, API_LIST);
export default Api;
三狐肢、業(yè)務(wù)中使用
import Api from '/../../utils/api.js';
.
.
.
getAll() {
Api.all({ id: 1 }).then(res => {
console.log(res);
})
}
通過(guò)對(duì)小程序網(wǎng)絡(luò)請(qǐng)求方法的二次封裝添吗，使得我們的代碼看上去更加的簡(jiǎn)潔，在接口的管理上也相對(duì)的便利份名，比如在后端修改API的路徑和方法時(shí)碟联，只需要在api.js文件中修改相應(yīng)的API即可，也免去了修改時(shí)忽略了更多調(diào)用的麻煩同窘。同時(shí)玄帕，也提高了代碼的復(fù)用性，一勞永逸想邦。
