當(dāng)開發(fā)者在開發(fā)時(shí)切省,可能會(huì)遇到這種情況:一個(gè)頁(yè)面的加載會(huì)需要多種請(qǐng)求返回的數(shù)據(jù)構(gòu)成,當(dāng)頁(yè)面一旦加載帕胆,顯示加載條朝捆,只有當(dāng)所有的請(qǐng)求都成功之后才會(huì)顯示其頁(yè)面,才會(huì)隱藏加載條懒豹。
但多種請(qǐng)求無(wú)法預(yù)測(cè)哪個(gè)請(qǐng)求首先完成芙盘。
如果使用請(qǐng)求中套用請(qǐng)求這種方法,用戶的體驗(yàn)不是很好脸秽。
可以采用 promise.all方法可以把多個(gè)promise實(shí)例合并為一個(gè)儒老,等待所有的子promise全部執(zhí)行完成之后,才會(huì)觸發(fā)回調(diào)函數(shù)。
使用方法:
- 將下載下來(lái)的promise文件復(fù)制到開發(fā)項(xiàng)目的目錄下记餐。
- 在頁(yè)面的js文件中引用贷盲。(其中api是自定義的請(qǐng)求配置,不能直接使用哦)
const api = require('../../utils/api.js') // api公共配置
const promise = require('../../utils/promise.min.js')
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
gameList: [],
lastList: []
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
*/
onLoad: function () {
const that = this;
wx.showLoading({
title: '加載中',
})
return new Promise(function (resolve, reject) {
Promise.all([that.games(), that.lastest()]).then(function ([d1, d2]) {
that.setData({
gameList: d1,
lastList: d2
})
}).then(function () {
wx.hideLoading();
})
})
},
games: function () {
return new Promise(function (resolve, reject) {
api.get('game/list', '', function (obj) {
resolve(obj) // success
})
})
},
lastest: function () {
return new Promise(function (resolve, reject) {
api.get('latest/list', '', function (obj) {
resolve(obj) // success
})
})
}
})