function queue_promise(arr) {
let sequence = Promise.resolve();
let res = [];
arr.forEach(a => { //a為function,返回值為promise
sequence = sequence.then(a).then(data => {
res.push(data);
return res;
})
})
return sequence;
}
async function queue_async(arr) {
let res = [];
for(let a of arr) {
let data = await a(); //不能寫(xiě)成a
res.push(data);
}
return res;
}
//異步任務(wù)1
function getA() {
return new Promise(function(resolve, reject){
setTimeout(function(){
resolve(2);
}, 1000);
});
}
//異步任務(wù)2
function getB() {
return new Promise(function(resolve, reject){
setTimeout(function(){
resolve(3);
}, 1000);
});
}
function addAB(a,b) {
return a+b
}
queue_promise([getA,getB])
.then(data => {
return addAB(data[0],data[1])
}).then(data=>console.log(data))
queue_async([getA,getB])
.then(data => {
return addAB(data[0],data[1])
}).then(data=>console.log(data))
兩者思路相同,都是創(chuàng)建隊(duì)列去處理異步任務(wù)
promise解決方法中痴施,使用一個(gè)sequence初始觸發(fā)的pomise脖母,狀態(tài)直接是resolve, 這個(gè)sequence不斷承接(更新為)每個(gè)異步任務(wù)完成后的promise疆导,并最終返回蟆沫,返回的sequence中可以拿到所有異步任務(wù)的輸出值res,另外蛾洛,此處其實(shí)沒(méi)有必要一定初始化 let sequence = Promise.resolve()养铸, sequence只要承接(更新為)每個(gè)異步任務(wù)完成后的promiese即可,promise解決方法可以改寫(xiě)如下
function queue_promise(arr) {
let sequence = null;
let res = [];
arr.forEach(a => { //a為function,返回值為promise
sequence = a().then(data => { //直接a() 即直接調(diào)用函數(shù)返回promise
res.push(data);
return res;
})
})
return sequence;
}
async解決方法與promise相同轧膘,有兩點(diǎn)需要注意钞螟,第一個(gè),await關(guān)鍵字不能在普通函數(shù)中使用谎碍,所以遍歷異步任務(wù)時(shí)不能使用forEach或map這樣的方法鳞滨,只能使用for循環(huán)指令。第二個(gè)蟆淀,上面定義每個(gè)異步任務(wù)為返回值為promise的普通函數(shù)拯啦,在promise方式中處理為 then(a) , 但在async方式中要寫(xiě)成 await a() 因?yàn)閠hen接收的參數(shù)為函數(shù),而await后面要跟一個(gè)需要等待的值熔任,如果直接放函數(shù)則不會(huì)得到正確結(jié)果褒链,這里需要直接放調(diào)用函數(shù)后返回的promise