ES6/ES7 中 Promise.all() 和 Promise.race() 方法使用详解

阅读时长 5 min read

在前端开发中,异步操作是非常常见的。而 Promise 是一种处理异步操作的方式,它能够更好地管理异步操作,避免回调地狱的问题。ES6/ES7 中的 Promise 提供了两个非常有用的方法:Promise.all() 和 Promise.race(),本文将详细介绍这两个方法的使用。

Promise.all()

Promise.all() 方法接收一个 Promise 对象的数组作为参数,返回一个新的 Promise 对象。当所有的 Promise 对象都成功时,新的 Promise 对象才会成功;当有一个 Promise 对象失败时,新的 Promise 对象也会失败。

语法

参数

  • iterable:一个可迭代对象,如数组或字符串

返回值

  • 一个新的 Promise 对象

示例

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

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

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

输出结果为:

在上面的示例中,我们创建了两个 Promise 对象 promise1 和 promise2,它们分别在 1 秒和 2 秒后返回成功的结果。我们将这两个 Promise 对象放在 Promise.all() 方法中,当它们都成功时,Promise.all() 方法返回一个包含两个结果的数组。

如果其中一个 Promise 对象失败,那么 Promise.all() 方法返回的 Promise 对象也会失败。例如:

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

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

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

输出结果为:

在上面的示例中,promise2 返回了一个失败的结果,Promise.all() 方法返回的 Promise 对象也会失败,我们可以通过 catch() 方法捕获到这个失败的结果。

Promise.race()

Promise.race() 方法接收一个 Promise 对象的数组作为参数,返回一个新的 Promise 对象。当其中有一个 Promise 对象成功或失败时,新的 Promise 对象也会成功或失败。

语法

参数

  • iterable:一个可迭代对象,如数组或字符串

返回值

  • 一个新的 Promise 对象

示例

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

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

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

输出结果为:

在上面的示例中,我们创建了两个 Promise 对象 promise1 和 promise2,它们分别在 1 秒和 2 秒后返回成功的结果。我们将这两个 Promise 对象放在 Promise.race() 方法中,当它们中的一个成功时,Promise.race() 方法返回这个成功的结果。

如果其中一个 Promise 对象失败,那么 Promise.race() 方法返回的 Promise 对象也会失败。例如:

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

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

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

输出结果为:

在上面的示例中,promise1 返回了一个成功的结果,Promise.race() 方法返回这个成功的结果,而不是 promise2 的失败结果。这说明了 Promise.race() 方法只要有一个 Promise 对象成功或失败,它就会返回这个结果,而不会等待其他的 Promise 对象。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d4dc32a941bf713491446c

Feed
back