在我們的程序中有些操作是需要等到一些接口的數(shù)據(jù)返回之后才能做的操作
比如我們?cè)谝粋€(gè)頁(yè)面需要發(fā)送好幾個(gè)請(qǐng)求，這幾個(gè)請(qǐng)求都發(fā)送完了我們?cè)偃ル[藏 loading效果瓦宜，一開始我是這樣操作的：
var p1 = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, 'one');
});
var p2 = new Promise((resolve, reject) => {
setTimeout(resolve, 2000, 'two');
});
var p3 = new Promise((resolve, reject) => {
setTimeout(resolve, 3000, 'three');
});
var p4 = new Promise((resolve, reject) => {
setTimeout(resolve, 4000, 'four');
});
var p5 = new Promise((resolve, reject) => {
setTimeout(reject, 4000, 'five');
});
function pro() {
Promise.all([p1, p2, p3, p4,p5]).then(values => {
console.log(values);
}, reason => {
console.log(reason)
});
}
pro();
執(zhí)行效果：
image.png
只是返回了 失敗回調(diào)霜瘪，這顯然不是我們想要的效果
但是亡电，我們寫好的時(shí)候疚顷，使用 Promise.all()方法的時(shí)候，想起來(lái)峦朗，Promise.all()這個(gè)方法建丧，只要這個(gè)方法的任意一個(gè) promise有reject也就是失敗狀態(tài)的時(shí)候，promise 不管剩余的其他的promise 是否完成波势，就會(huì)停止當(dāng)前的監(jiān)聽翎朱，那就有可能丟失當(dāng)前的 其他請(qǐng)求的狀態(tài)和結(jié)果，所以我們?cè)趯懙臅r(shí)候尺铣，就應(yīng)該考慮拴曲，我們當(dāng)前promise的執(zhí)行權(quán)是不是應(yīng)該交給當(dāng)前單個(gè)promise的回調(diào)具體應(yīng)該怎么操作呢
var p1 = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, 'one');
});
var p2 = new Promise((resolve, reject) => {
setTimeout(resolve, 2000, 'two');
});
var p3 = new Promise((resolve, reject) => {
setTimeout(reject, 3000, 'three');
});
var p4 = new Promise((resolve, reject) => {
setTimeout(resolve, 4000, 'four');
});
var p5 = new Promise((resolve, reject) => {
setTimeout(resolve, 4000, 'five');
});
let PromiseArr=[p1,p2,p3,p4,p5];
function myPromise(promiseList) {
return promiseList.map(promise =>
promise.then((res) => ({ status: 'ok', res }), (err) => ({ status: 'not ok', err }))
)
}
function pro() {
Promise.all(myPromise(PromiseArr))
.then(
res =>{
console.log(res);
if(PromiseArr.length==res.length){
//關(guān)閉loading
}
}
,err=>console.log(err)
)
}
pro()
執(zhí)行效果：
image.png
然后我們判斷，返回結(jié)果的 數(shù)組的長(zhǎng)度是否等于傳入數(shù)組的長(zhǎng)度凛忿，就能知道請(qǐng)求是發(fā)送完成了（不管請(qǐng)求結(jié)果是怎樣）澈灼；
完！！
