Promise 的奥义不止是三,ES2018 的夏季料理千变万化

阅读时长 6 分钟读完

Promise 的奥义不止是三,ES2018 的夏季料理千变万化

在前端开发领域中,Promise 是一个非常重要的概念。不仅仅可以用来处理异步请求,它的一些高级用法也可以让我们更好地掌握 JavaScript 异步编程的技巧。而 ES2018 中新增的 Promise 相关的特性更是为开发者提供了更多的奥义。

今天我们将会深入探讨 Promise 的一些高级用法,以及 ES2018 中新增的 Promise 特性。

一、Promise 的高级用法

  1. Promise.all

当我们需要并行执行多个异步请求并且等待所有请求完成之后才执行下一步时,可以使用 Promise.all。以下是一个使用示例:

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

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

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

以上代码中,我们定义了两个异步请求 promise1 和 promise2 并使用了 Promise.all 进行并行执行。当所有请求都完成后,then 方法会将所有请求的结果以数组形式返回。

  1. Promise.race

与 Promise.all 相似,Promise.race 也可用于并行执行多个异步请求。与 Promise.all 不同的是,Promise.race 只会返回最先执行完成的请求的结果。一般用于控制超时。

以下是一个使用示例:

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

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

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

以上代码中,promise2 请求先完成,所以 Promise.race 方法会将 promise2 的结果返回,而忽略了 promise1 的结果。

  1. Promise.allSettled

Promise.allSettled 是 ES2020 中的新特性,它会返回一个 Promise,一旦所有的 Promise 被 settled(fulfilled 或 rejected)就会 resolve。返回结果为一个数组,数组中的每个元素都包含了每个 Promise 的结果或原因(如果 Promise 是 rejected)。

以下是一个使用示例:

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

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

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

以上代码中,promise1 请求成功,promise2 请求失败,Promise.allSettled 方法会将两个请求结果都返回。

  1. Promise.any

Promise.any 是 ES2021 中的新特性,它与 Promise.race 很相似,也会并行执行多个异步请求,但它并不是返回第一个执行完成的请求的结果,而是返回第一个被 settled(fulfilled 或 rejected)的 Promise 的结果。

以下是一个使用示例:

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

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

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

以上代码中,虽然 promise2 请求执行得更慢,但是由于 promise1 请求失败了,Promise.any 方法会将 promise2 的结果返回。

二、ES2018 中新增的 Promise 特性

在 ES2018 中,新增了 Promise.prototype.finally 方法,该方法用于在一个 promise 执行完成时,不论其结果是成功还是失败,都会执行特定的回调函数。以下是一个使用示例:

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

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

以上代码中,finally 方法的回调函数无论成功还是失败都会执行,并且该方法返回的也是一个 Promise 对象,因此可以继续链式调用。

总结

通过以上内容的学习,我们对 Promise 不仅有了更深入的了解,也对 ES2018 中新增的 Promise 特性有了更多的认知。掌握 Promise 的高级用法和 ES2018 新特性,不仅可以让我们在异步编程中更加得心应手,同时也能够提高 JavaScript 代码的可读性和可维护性。

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

纠错
反馈