当开发者在开发时,可能会遇到这种情况:一个页面的加载会需要多种请求返回的数据构成,当页面一旦加载,显示加载条,只有当所有的请求都成功之后才会显示其页面,才会隐藏加载条。
但多种请求无法预测哪个请求首先完成。
如果使用请求中套用请求这种方法,用户的体验不是很好。
可以采用 promise.all方法可以把多个promise实例合并为一个,等待所有的子promise全部执行完成之后,才会触发回调函数。
使用方法:
- 将下载下来的promise文件复制到开发项目的目录下。
- 在页面的js文件中引用。(其中api是自定义的请求配置,不能直接使用哦)
const api = require('../../utils/api.js') // api公共配置
const promise = require('../../utils/promise.min.js')
Page({
/**
* 页面的初始数据
*/
data: {
gameList: [],
lastList: []
},
/**
* 生命周期函数--监听页面加载
*/
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
})
})
}
})
网友评论