如何在 ES10 中处理多个异步请求后返回的结果?

阅读时长 5 分钟读完

在现代前端开发中,我们经常需要处理多个异步请求的结果,并将它们合并作为一个返回值使用。在 ES10 中,可以通过 Promise.allSettled() 方法来处理这种情况。

Promise.allSettled()

Promise.allSettled() 方法接收一个 Promise 数组作为参数,并返回一个 Promise 对象。该 Promise 对象在所有传入的 Promise 对象都已经 settled(包括 resolved 和 rejected)之后才会 settled。

该方法不会抛出异常。如果传入的 Promise 数组中存在 rejected 的 Promise 对象,它们的结果会被包装在一个对象中返回,而不会抛出异常中断代码执行。

Promise.allSettled() 的返回值是一个 Promise,其中包含传入的 Promise 数组中所有 Promise 对象的 settled 状态和结果。每个 settled Promise 的结果都包含在一个对象中,并带有一个表明其状态的属性(status)。

示例代码如下:

在上面的示例中,Promise.allSettled() 接收两个 Promise 对象:一个已经 resolved,一个已经 rejected。results 数组中包含两个对象,每个对象都有一个 status 属性来指示 Promise 对象的状态,以及一个 valuereason 属性,分别指示 resolved 和 rejected Promise 对象的结果。

处理结果

处理 Promise.allSettled() 返回的结果时,需要注意以下几点:

  • 首先,需要检查每个 Promise 对象的状态,并根据其状态来处理结果。
  • 其次,当所有 Promise 对象都已 settled 时,需要将所有 resolved Promise 对象的结果合并在一起使用。
  • 最后,如果存在 rejected Promise 对象,需要根据具体情况进行处理。

以下是一个示例代码,展示了如何在 Promise.allSettled() 中处理多个异步请求并返回结果:

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

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

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

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

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

在上面的示例中,fetchUsers() 函数的目标是获取三个用户的数据,每个用户数据都是通过调用 fetch() 方法请求得到的。通过将三个 Promise 对象传递给 Promise.allSettled() 方法,我们可以同时处理多个异步请求。

Promise.allSettled() 返回结果后,我们对每个请求的结果进行了过滤和映射操作。我们使用 filter() 方法来过滤掉所有 rejected 的 Promise 对象,并使用 map() 方法将 resolved 的 Promise 对象的 value 属性提取出来。这样我们就能够将所有 resolved 的结果合并在一起,并将其放入 users 数组中。如果存在 rejected 的 Promise 对象,我们也使用 filter()map() 方法将其提取到一个单独的 errors 数组中。

总结

通过使用 ES10 中的 Promise.allSettled() 方法,我们可以轻松地处理多个异步请求的结果,并将其合并为一个返回值。同时,我们还可以通过处理 resolved 和 rejected Promise 对象来确定如何处理结果,从而更好地控制程序的行为。

在下一次处理多个异步请求的结果时,不妨尝试使用 Promise.allSettled() 方法,它会使你的代码更加清晰易读,也会为你处理异步请求的结果带来更大的灵活性和可靠性。

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

纠错
反馈