在前端开发中,异步操作是非常常见的。而 Promise 是一种处理异步操作的方式,它能够更好地管理异步操作,避免回调地狱的问题。ES6/ES7 中的 Promise 提供了两个非常有用的方法:Promise.all() 和 Promise.race(),本文将详细介绍这两个方法的使用。
Promise.all()
Promise.all() 方法接收一个 Promise 对象的数组作为参数,返回一个新的 Promise 对象。当所有的 Promise 对象都成功时,新的 Promise 对象才会成功;当有一个 Promise 对象失败时,新的 Promise 对象也会失败。
语法
Promise.all(iterable);
参数
- iterable:一个可迭代对象,如数组或字符串
返回值
- 一个新的 Promise 对象
示例
-- -------------------- ---- ------- --- -------- - --- ----------------- ------- -- - ------------- -- - -------------------- -- ------ --- --- -------- - --- ----------------- ------- -- - ------------- -- - -------------------- -- ------ --- ---------------------- ---------------------- -- - -------------------- ---
输出结果为:
['promise1', 'promise2']
在上面的示例中,我们创建了两个 Promise 对象 promise1 和 promise2,它们分别在 1 秒和 2 秒后返回成功的结果。我们将这两个 Promise 对象放在 Promise.all() 方法中,当它们都成功时,Promise.all() 方法返回一个包含两个结果的数组。
如果其中一个 Promise 对象失败,那么 Promise.all() 方法返回的 Promise 对象也会失败。例如:
-- -------------------- ---- ------- --- -------- - --- ----------------- ------- -- - ------------- -- - -------------------- -- ------ --- --- -------- - --- ----------------- ------- -- - ------------- -- - ------------------- -- ------ --- ---------------------- ---------------------- -- - -------------------- -------------- -- - ------------------- ---
输出结果为:
promise2
在上面的示例中,promise2 返回了一个失败的结果,Promise.all() 方法返回的 Promise 对象也会失败,我们可以通过 catch() 方法捕获到这个失败的结果。
Promise.race()
Promise.race() 方法接收一个 Promise 对象的数组作为参数,返回一个新的 Promise 对象。当其中有一个 Promise 对象成功或失败时,新的 Promise 对象也会成功或失败。
语法
Promise.race(iterable);
参数
- iterable:一个可迭代对象,如数组或字符串
返回值
- 一个新的 Promise 对象
示例
-- -------------------- ---- ------- --- -------- - --- ----------------- ------- -- - ------------- -- - -------------------- -- ------ --- --- -------- - --- ----------------- ------- -- - ------------- -- - -------------------- -- ------ --- ----------------------- ---------------------- -- - -------------------- ---
输出结果为:
promise1
在上面的示例中,我们创建了两个 Promise 对象 promise1 和 promise2,它们分别在 1 秒和 2 秒后返回成功的结果。我们将这两个 Promise 对象放在 Promise.race() 方法中,当它们中的一个成功时,Promise.race() 方法返回这个成功的结果。
如果其中一个 Promise 对象失败,那么 Promise.race() 方法返回的 Promise 对象也会失败。例如:
-- -------------------- ---- ------- --- -------- - --- ----------------- ------- -- - ------------- -- - -------------------- -- ------ --- --- -------- - --- ----------------- ------- -- - ------------- -- - ------------------- -- ------ --- ----------------------- ---------------------- -- - -------------------- -------------- -- - ------------------- ---
输出结果为:
promise1
在上面的示例中,promise1 返回了一个成功的结果,Promise.race() 方法返回这个成功的结果,而不是 promise2 的失败结果。这说明了 Promise.race() 方法只要有一个 Promise 对象成功或失败,它就会返回这个结果,而不会等待其他的 Promise 对象。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d4dc32a941bf713491446c