由于本人之前都是做的app鞍盗，用微信小程序網(wǎng)絡(luò)感覺(jué) 可以封裝一下，所以就用自己淺微的技術(shù)進(jìn)行了封裝嫉戚。用的是es6的promise棒呛。
先上圖：
1.什么是Promise
Promise 是異步編程的一種解決方案，其實(shí)是一個(gè)構(gòu)造函數(shù)告唆，自己身上有all棺弊、reject、resolve這幾個(gè)方法擒悬，原型上有then模她、catch等方法。
Promise對(duì)象有以下兩個(gè)特點(diǎn)茄螃。
（1）對(duì)象的狀態(tài)不受外界影響缝驳。Promise對(duì)象代表一個(gè)異步操作，有三種狀態(tài)：pending（進(jìn)行中）归苍、fulfilled（已成功）和rejected（已失斢糜）。只有異步操作的結(jié)果拼弃，可以決定當(dāng)前是哪一種狀態(tài)夏伊，任何其他操作都無(wú)法改變這個(gè)狀態(tài)。這也是Promise這個(gè)名字的由來(lái)吻氧，它的英語(yǔ)意思就是“承諾”溺忧，表示其他手段無(wú)法改變咏连。
（2）一旦狀態(tài)改變，就不會(huì)再變鲁森，任何時(shí)候都可以得到這個(gè)結(jié)果祟滴。Promise對(duì)象的狀態(tài)改變，只有兩種可能：從pending變?yōu)閒ulfilled和從pending變?yōu)閞ejected歌溉。只要這兩種情況發(fā)生垄懂，狀態(tài)就凝固了，不會(huì)再變了痛垛，會(huì)一直保持這個(gè)結(jié)果草慧，這時(shí)就稱(chēng)為 resolved（已定型）。如果改變已經(jīng)發(fā)生了匙头，你再對(duì)Promise對(duì)象添加回調(diào)函數(shù)漫谷，也會(huì)立即得到這個(gè)結(jié)果。這與事件（Event）完全不同蹂析，事件的特點(diǎn)是舔示，如果你錯(cuò)過(guò)了它，再去監(jiān)聽(tīng)识窿，是得不到結(jié)果的斩郎。
let p = new Promise(function(resolve, reject){
//做一些異步操作
setTimeout(function(){
console.log('執(zhí)行完成Promise');
resolve('要返回的數(shù)據(jù)可以任何數(shù)據(jù)例如接口返回?cái)?shù)據(jù)');
}, 2000);
});
其執(zhí)行過(guò)程是：執(zhí)行了一個(gè)異步操作，也就是setTimeout喻频，2秒后缩宜，輸出“執(zhí)行完成”，并且調(diào)用resolve方法甥温。
在微信小程序運(yùn)用 Promise：
//service.js
//service.js
const wxRequest = require('wxRequest.js');
const config = require("config.js");
// 列表數(shù)據(jù) type：video
function getBusInfoPromise(busName) {
var getBusInfoUrl = config.BASE_URL;
var data = { "type": busName}
return wxRequest.wxPromise("POST", getBusInfoUrl, data);
}
module.exports = {
getBusInfoPromise: getBusInfoPromise
}
////wxRequest.js
const Promise = require('es6-promise.min.js');
function wxPromise(method, url, data) {
//返回一個(gè)Promise對(duì)象
return new Promise(function (resolve, reject) {
wx.request({
url: url,
method: method,
data: data,
//在header中統(tǒng)一封裝報(bào)文頭锻煌，這樣不用每個(gè)接口都寫(xiě)一樣的報(bào)文頭定義的代碼
header: {
"Content-Type": "application/json"
},
success: function (res) {
// setTimeout(function () {
// wx.hideLoading();
// }, 100);
// //這里可以根據(jù)自己項(xiàng)目服務(wù)端定義的正確的返回碼來(lái)進(jìn)行，接口請(qǐng)求成功后的處理姻蚓，當(dāng)然也可以在這里進(jìn)行報(bào)文加解密的統(tǒng)一處理
// if (res.data.code ==200) {
// resolve(res);
// } else {
// //如果出現(xiàn)異常則彈出dialog
// wx.showModal({
// title: '提示',
// content: res.data.code + '系統(tǒng)異常',
// confirmColor: '#118EDE',
// showCancel: false,
// success: function (res) {
// if (res.confirm) {
// }
// }
// });
// }
resolve(res);
},
fail: function (res) {
// setTimeout(function () {
// wx.hideLoading();
// }, 100);
// wx.showToast({
// title: '服務(wù)器暫時(shí)無(wú)法連接',
// icon: 'loading',
// duration: 2000
// })
reject(res);
}
});
});
}
function getRequest(url, data) {
return wxPromise("GET", url, data);
}
function postRequest(url, data) {
return wxPromise("POST", url, data);
}
module.exports = {
wxPromise: wxPromise,
postRequest: postRequest,
getRequest: getRequest,
}
在wxml對(duì)應(yīng)的頁(yè)面的js中進(jìn)行業(yè)務(wù)接口調(diào)用宋梧，從調(diào)用方式可以看到，第一個(gè)then里面定義了第一個(gè)getBusInfoPromise接口調(diào)用的resolve處理函數(shù)狰挡，因?yàn)榈诙€(gè)接口getBusStopListPromise依賴(lài)于第一個(gè)接口捂龄，所以在第一個(gè)接口的resolve的方法中調(diào)用了getBusStopListPromise方法并將Promise對(duì)象返回，在第二個(gè)then中定義resolve的處理方法加叁，如果還有第三個(gè)接口依賴(lài)倦沧，那么調(diào)用方式類(lèi)似。這樣是不是很好的解決了回調(diào)重重嵌套的問(wèn)題它匕。
// 記得引用
//const service = require('../../utils/service.js');
service.getBusInfoPromise(this.data.page).then(res => {
// res.data j就是請(qǐng)求到的數(shù)據(jù)
// --下面--分頁(yè)邏輯----
if (res.data.result.length == 0) {
wx.showToast({
title: '沒(méi)有更多了',
})
return false;
}
var result = res.data.result;
if (this.data.page > 1) {
result = this.data.result.concat(res.data.result);
}
this.setData({
result: result,
})
});
附：es6-promise.min.js 的地址:
https://github.com/fsi000041/es6-promise.min.js/blob/master/es6-promise.min.js
