js 手動實(shí)現(xiàn) promise.all的功能
2021-10-12 14:20:40

在中高級面試中，實(shí)現(xiàn)一個promise.all是一個頻率較高的面試題

首先分析下 promise.all()，（參考MDN)

1. 接收一個promise的iterable類型（注：Array，Map，Set都屬于ES6的iterable類型）的參數(shù)
2. 返回一個promsie實(shí)例
3. 參數(shù)里所有的promise都成功回調(diào)后 resolve返回一個數(shù)組結(jié)果，數(shù)組順序和參數(shù)順序一致
4. 參數(shù)里有一個失敗的就會reject，并且reject第一個失敗的信息

// 下面實(shí)現(xiàn)一下
  Promise.prototype.all = function (iterators) {
    const promises = Array.from(iterators); // 強(qiáng)制轉(zhuǎn)換成數(shù)組
    const len = promises.length; // 記錄數(shù)組的長度
    let count = 0; // 標(biāo)記成功的個數(shù)
    let resultList = [];// 要返回的 數(shù)組結(jié)果
    return new Promise((resolve, reject) => {  // 返回一個promise 
      for (let index in promises) { // for 循環(huán)配合 let 確保 數(shù)組結(jié)果和參數(shù)順序一致
        Promise.resolve(promises[index])         // Promise.resolve，如果是參數(shù)是promise 直接返回，如果不是則直接執(zhí)行Promise.resolve方法 到 then 接受 
          .then((result) => {
            count++;          // 記錄個數(shù)，等于len時 resolve
            resultList[index] = result; // 對應(yīng)賦值結(jié)果
            if (count === len) {
              resolve(resultList);
            }
          })
          .catch(e => { 
            reject(e); // 當(dāng)收到錯誤時，直接reject，返回錯誤信息
          })
      }
    })
  }


 let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('1')
    }, 5000);
  })
  let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('2')
    }, 2000);
  })
  let p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('3')
    }, 3000);
  })
  let p4 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('4')
    }, 4000);
  })
  Promise.all([p1, p2, p3, p4]).then(res => {
    console.log(res,'res') 
  }).catch(err => {
    console.log(err)
  })
// ?['1', '2', '3', '4'] 'res' 

理解其中的邏輯，其實(shí)并不復(fù)雜