全网最详细手写promise.all

www.czblog.top/article/1ff…

📝 手写promise.all

首先如何使用promise.all

它可以帮助我们去处理多个事件（来自mdn案列）

javascript

// 案例代码
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "foo");
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// 打印结果 [3, 42, "foo"]

JavaScript

Copy

那如何模拟实现一个promise.all，但是这种只支持数组

javascript

function promiseAll(promises) {
  return new Promise((resolve, reject) => {
    const results = []
    let completed = 0
    promises.forEach((p, index) => {
      Promise.resolve(p).then(value => {
        results[index] = value
        completed += 1
        if (completed === promises.length) {
          resolve(results)
        }
      }).catch(reject)
    })

    if (promises.length === 0) {
      resolve([])
    }
  })
}

JavaScript

🤗 最终支持迭代版本的

javascript

function promiseAll(iterable) {
  return new Promise((resolve, reject) => {
    if (iterable == null || typeof iterable[Symbol.iterator] !== 'function') {
      return reject(new TypeError('输入必须是可迭代的'))
    }

    const results = []
    let count = 0
    let index = 0
    let resolvedCount = 0

    for (const item of iterable) {
      const currentIndex = index

      Promise.resolve(item)
        .then(value => {
          results[currentIndex] = value
          resolvedCount++
          if (resolvedCount === count) {
            resolve(results)
          }
        })
        .catch(reject)

      index++
      count++
    }

    if (count === 0) {
      resolve([])
    }
  })
}