前端开发攻略---手写Promise.all()，看这篇就够了。

最新推荐文章于 2024-07-26 16:51:17 发布

bbamx.

最新推荐文章于 2024-07-26 16:51:17 发布

阅读量1.2k

点赞数 19

分类专栏：前端开发攻略文章标签：前端 javascript promise

本文链接：https://blog.csdn.net/nibabaoo/article/details/138493549

版权

前端开发攻略专栏收录该内容

50 篇文章 1 订阅

订阅专栏

1、演示

2、Promise.all介绍

Promise.all 是一个用于并行执行多个 Promise 实例的方法。它接受一个包含多个 Promise 实例的数组作为参数，并返回一个新的 Promise 实例。这个新的 Promise 实例在数组中所有的 Promise 实例都成功执行后才会被成功执行，如果有任何一个 Promise 实例失败，则整个 Promise.all 实例会立刻失败。

使用 Promise.all 可以在需要同时执行多个异步操作的情况下，等待它们全部完成后再执行接下来的操作。这种方法可以提高性能，因为多个任务可以同时执行，并且可以在最短的时间内获取结果。

例如，假设有三个异步操作 A、B、C，我们可以这样使用 Promise.all 来同时执行它们：
Promise.all([A(), B(), C()])
  .then((results) => {
    // 当 A、B、C 都成功执行后，这里会获取到它们的结果数组 results
  })
  .catch((error) => {
    // 如果任何一个 Promise 实例失败，这里会捕获到错误
  });
需要注意的是，Promise.all 不会按顺序执行 Promise 实例，而是并行执行它们。因此，如果有多个 Promise 实例之间存在依赖关系，需要谨慎使用 Promise.all。

3、接收的参数

Promise.all 方法实际上接受一个可迭代对象作为参数，而不一定是数组。这个可迭代对象可以是数组、类数组对象（比如 arguments 对象）、字符串、Set、Map 等具有迭代器的对象。在使用时，Promise.all 会将可迭代对象转换为一个数组，然后对该数组中的每个元素进行处理，并返回一个新的 Promise 实例。因此，您可以使用不同类型的可迭代对象作为参数来调用 Promise.all。

4、代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    Promise.myAll = function (proms) {
      let res = null
      let rej = null
      const p = new Promise((resolve, reject) => {
        res = resolve
        rej = reject
      })
      let i = 0
      let fulfilled = 0
      const result = []
      for (const prom of proms) {
        const index = i
        i++
        Promise.resolve(prom).then(data => {
          result[index] = data
          fulfilled++
          if (fulfilled === i) {
            res(result)
          }
        }, rej)
      }
      if (i == 0) {
        res([])
      }
      return p
    }

    Promise.myAll([1, 2, 3, Promise.reject(123)]).then(
      res => {
        console.log(res)
      },
      err => {
        console.log(err)
      }
    )
  </script>
</html>
代码解析：

定义了一个名为Promise.myAll的静态方法，接受一个参数proms，该参数为一个包含多个Promise对象的数组。
创建了一个新的Promise对象p，并定义了两个回调函数res和rej。
使用for循环遍历proms数组中的每一个Promise对象。
对每一个Promise对象调用Promise.resolve方法将其转换为Promise对象，并通过.then方法添加对应的处理函数。
在每一个Promise对象被resolved时，将其返回的数据存储在result数组中，并增加fulfilled计数器。
当所有的Promise对象都被resolved时，调用res函数将result数组作为参数传递给新Promise对象p的resolve方法。
如果proms数组为空，则直接调用res函数将空数组作为参数传递给新Promise对象p的resolve方法。
返回新Promise对象p。
整个函数的作用是同时处理多个Promise对象，等所有Promise对象都resolved后返回一个包含所有Promise对象返回数据的数组。