JavaScript - promise.all()及實現(xiàn)

  • 用處:并行執(zhí)行一系列異步操作,返回結果集。

|Promise.all(iterable)方法返回一個 [Promise],此實例在 iterable 參數(shù)內所有的 promise 都“完成(resolved)”或參數(shù)中不包含 promise 時回調完成(resolve);如果參數(shù)中 promise 有一個失?。╮ejected),此實例回調失?。╮eject),失敗原因的是第一個失敗 promise 的結果。

  • 特點:
    • 返回值將會按照參數(shù)內的 promise 順序排列,而不是由調用 promise 的完成順序決定。
    • 有一個出錯,就被認定為失敗。
    • 返回的是一個promise。
    • 參數(shù)是一個數(shù)組,而且期望每個都是promise,如果不是會直接放入結果集。
  • 了解了特點,可以初步得到設計思路
      1. promise.all()返回值是new Promise
      1. 需要用一個數(shù)組存放每一個promise的結果值
      1. 遍歷參數(shù)數(shù)組,判斷是否是promise,是的話執(zhí)行得到結果后壓入結果數(shù)組;否則直接放入結果數(shù)組。
      1. 當每個都成功執(zhí)行后,resolve(result)
      1. 當有一個失敗,reject
function isPromise(obj) {
    return !!obj && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function';  
}

const myPromiseAll = (arr)=>{
    let result = [];
    return new Promise((resolve,reject)=>{
        for(let i = 0;i < arr.length;i++){
            if(isPromise(arr[i])){
                arr[i].then((data)=>{
                    result[i] = data;
                    if(result.length === arr.length){
                        resolve(result)
                    }
                },reject)
            }else{
                result[i] = arr[i];
            }
        }    
    })
}
  • 測試:
let p1 = Promise.resolve(3);
let p2 = 1337;
let p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
}); 
myPromiseAll([p1, p2, p3]).then(values => { 
  console.log(values); // [3, 1337, "foo"] 
}); 
  • 有一個操作失敗情況

let p1 = new Promise((resolve, reject) => { 
    setTimeout(resolve, 1000, 'one'); 
}); 
let p2 = new Promise((resolve, reject) => { 
    setTimeout(resolve, 2000, 'two'); 
});
let p3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 3000, 'three');
});
let p4 = new Promise((resolve, reject) => {
    setTimeout(resolve, 4000, 'four');
});
let p5 = new Promise((resolve, reject) => {
    reject('reject');
});
  
myPromiseAll([p1, p2, p3, p4, p5]).then(values => { 
    console.log(values);
}, reason => {
    console.log(reason);// reject
});

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • Promise 對象 Promise 的含義 Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調函...
    neromous閱讀 8,825評論 1 56
  • JavaScript里通常不建議阻塞主程序,尤其是一些代價比較昂貴的操作,如查找數(shù)據(jù)庫,下載文件等操作,應該用異步...
    張歆琳閱讀 2,831評論 0 12
  • 含義 Promise是異步編程的一種解決方案,用于一個異步操作的最終完成(或失敗)及其結果值的表示,比傳統(tǒng)的回調函...
    nimw閱讀 27,348評論 0 4
  • 前言 本文旨在簡單講解一下javascript中的Promise對象的概念,特性與簡單的使用方法。并在文末會附上一...
    _暮雨清秋_閱讀 2,312評論 0 3
  • 編后吐槽:寫的快花眼,很詳細,耐心看必受益匪淺 JavaScript的執(zhí)行環(huán)境是「單線程」的。所謂單線程,是指JS...
    果汁涼茶丶閱讀 4,759評論 8 27

友情鏈接更多精彩內容