多个 Promise 并行执行,如何知道所有 Promise 是否完成?

阅读时长 4 分钟读完

多个 Promise 并行执行,如何知道所有 Promise 是否完成?

在前端开发中,经常会遇到一种情况,需要同时执行多个异步操作,例如并行请求多个接口数据,然后在所有异步操作完成后再进行下一步操作。这时候,我们可以使用 Promise.all() 方法来实现这一需求。

Promise.all() 方法接收一个由 Promise 对象组成的数组作为参数,返回一个新的 Promise 对象。该 Promise 对象在所有 Promise 对象都成功完成时才会被解析,返回的值是一个由所有 Promise 对象的解析值组成的数组,顺序与传入的数组一致。如果其中任何一个 Promise 对象失败,则整个 Promise.all() 方法失败,返回的是第一个失败的 Promise 对象的错误信息。

下面是一个示例代码:

在上面的代码中,我们创建了三个 Promise 对象,分别在 2 秒、3 秒和 1 秒后成功解析。然后我们使用 Promise.all() 方法将这三个 Promise 对象组成的数组作为参数传入,同时使用 then() 方法监听 Promise.all() 方法返回的 Promise 对象。当所有的 Promise 对象都成功解析后,then() 方法会接收一个由所有 Promise 对象的解析值组成的数组作为参数,并将其打印在控制台上。如果其中任何一个 Promise 对象失败,则 catch() 方法会接收失败的 Promise 对象的错误信息,并将其打印在控制台上。

除了 Promise.all() 方法之外,我们还可以使用 async/await 关键字来实现同样的功能。下面是一个示例代码:

-- -------------------- ---- -------
----- -------- - --- --------------- -- ------------- -- ---------------- - ----------- -------
----- -------- - --- --------------- -- ------------- -- ---------------- - ----------- -------
----- -------- - --- --------------- -- ------------- -- ---------------- - ----------- -------

----- -------- ------------------ -
  ----- ------ - ----- ---------------------- --------- -----------
  --------------------
-

-------------------

在上面的代码中,我们定义了一个 async 函数 parallelPromises() 来执行多个 Promise 对象的并行操作。在函数中,我们使用 await 关键字等待 Promise.all() 方法的返回值,并将其赋值给变量 values。当所有的 Promise 对象都成功解析后,values 变量会包含一个由所有 Promise 对象的解析值组成的数组,然后我们将其打印在控制台上。

总结一下,当我们需要同时执行多个异步操作,并在所有操作完成后进行下一步操作时,可以使用 Promise.all() 方法或 async/await 关键字来实现。这两种方法都非常方便,可以大大提高我们的开发效率。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65d14fd7add4f0e0ffa090d5

纠错
反馈