測試例子
var f11 = Promise.resolve("111");var f22 = Promise.resolve("222");var f33 = Promise.resolve("333");// var f33 = Promise.reject("333");
1、用原生 Promise 實現
邏輯說明:接收一個由多個promise方法組成的數組,異步按數組順序調用。
如果全部成功
成功計數變量+1,
將成功的promise返回值插入到臨時數組中,
(調用的數量 == 成功的數量) 則把臨時數組返回。
如果有一個失敗則程序終止并拋出錯誤的promise結果,前面成功的不輸出
function promiseAll(arr) {return new Promise((resolve, reject) => {let fullLen = 0; // 成功數量let resArr = []; // 存儲成功的結果for (let i = 0; i < arr.length; i++) {arr[i].then((val) => {fullLen++; // 成功數量+1resArr[i] = val; // 把結果存儲到臨時數組中// 成功的數量 和 傳入數量一致代表全部都成功了,將存儲結果數組返回出去if (fullLen == arr.length) resolve(resArr);},// 如果其中一個promise錯誤則返回錯誤信息并終止循環,同時在它前面成功的promise返回值都不返回(reson) => reject(reson) );}});}// 測試promiseAll([f11, f22, f33]).then((val) => {console.log(val, "res"); //打印 [111, 222, 333]}).catch((rej) => {console.log(rej, "rej");});
2、用async await 實現
邏輯說明:
初始一個存儲數組
將數組中每個promise成功返回的值插入到resArr中,循環完將數組返回出去。
如果其中一個錯誤,則拋出報錯的promise原因。
提示:for of 是取數組元素的value,for in則是key(常考面試題)
示例:arr 等同于 [ 0:f11, 1:f22, 2:f33 ] ,所以循環中的promis就是f11,f22,f33。即數組元素的value,下標則是key。
async function promiseAll(arr) {try {let resArr = [];for (let promis of arr) {resArr.push(await promis);}return resArr; } catch (error) {return error;}}// 測試promiseAll([f11, f22, f33]).then((val) => {console.log(val, "res"); //打印 [111, 222, 333]}).catch((rej) => {console.log(rej, "rej");});