如何正确地使用 Promise.allSettled()

阅读时长 4 分钟读完

在前端开发中,我们经常会使用 Promise 来处理异步操作。而 Promise.allSettled() 是 ES2020 中新添加的一个方法,它可以让我们同时处理多个 Promise 实例的状态,并返回一个代表所有 Promise 结果的状态列表。本文将详细介绍 Promise.allSettled() 的使用、含义和注意事项,并通过示例代码进行演示。

Promise.allSettled() 的使用

Promise.allSettled() 接收一个 Promise 实例数组参数,并返回一个新的 Promise 实例。该新的 Promise 实例会在所有给定的 Promise 都已经被解析或者被拒绝时创建,并返回一个包含所有 Promise 状态的对象数组。

Promise.allSettled() 回调函数有两个形参,第一个形参是包含了所有 Promise 状态的数组,第二个形参是对象。

数组中包含的对象包括以下信息:

  • status:标记当前的 Promise 实例状态,可以是 fulfilled 或者 rejected。
  • value/reason:如果当前的状态是 fulfilled,则 value 会返回当前 Promise 的值,如果是 rejected,则 reason 会返回当前 Promise 的错误信息。

Promise.allSettled() 的含义

Promise.allSettled() 方法的名字中,“Settled” 意为“已解析”或“已拒绝”,所以 Promise.allSettled() 方法会在所有 Promise 实例都已解析或者已拒绝之后执行。与 Promise.all() 方法不同的是,Promise.allSettled() 方法不会因为某个 Promise 实例被拒绝而终止执行并返回一个错误。

另外,通过 Promise.allSettled() 方法,我们只需要等待所有 Promise 实例的状态变化,而不需要考虑它们的解析值具体是什么。因此,当我们需要同时处理多个异步操作的时候,使用 Promise.allSettled() 方法会更加简单和直观。

Promise.allSettled() 的注意事项

在使用 Promise.allSettled() 方法时,需要注意以下事项:

  • 接收的 Promise 实例数组中必须至少有一个 Promise 实例。
  • Promise.allSettled() 返回的结果中每个 Promise 状态对应的对象一定会包含 status 属性,而 value 和 reason 属性只有在对应状态存在时才会发生。
  • Promise.allSettled() 方法本身也会返回一个 Promise 实例。因此,我们需要使用 then() 方法来接收其返回的结果。

示例代码

下面是一个使用 Promise.allSettled() 方法的示例代码:

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

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

------------------------------------------- -- -
  ---------------------
---
展开代码

在以上示例代码中,我们使用了 fetch() 方法来请求三个 url,并将返回的 Promise 实例存入数组中。然后,我们使用 Promise.allSettled() 方法来等待所有 Promise 实例被解析或者被拒绝,并返回一个包含所有 Promise 实例状态的对象数组,最后将结果输出到控制台中。

总结

Promise.allSettled() 方法对于同时处理多个异步操作非常有用。我们只需要等到所有 Promise 实例的状态变化,就可以得到一个包括所有 Promise 状态的对象数组。在使用该方法时需要注意数组中必须至少有一个 Promise 实例,以及返回的结果中每个 Promise 状态对应的对象一定会包含 status 属性。希望本文能够帮助您正确地使用 Promise.allSettled() 方法,并且为您的前端开发工作带来便利。

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

纠错
反馈

纠错反馈