ES6 中的 Promise.all() 和 Promise.race()
随着前端技术的快速发展，异步编程已经成为了前端开发中不可避免的一部分。ES6 开始引入 Promise 对象，为异步编程提供了更加方便和高效的解决方案。其中 Promise.all() 和 Promise.race() 是两个非常重要的方法，可以帮助我们高效地解决异步编程问题。
Promise.all()
Promise.all() 方法可以接收一个 Promise 实例数组作为参数，并返回一个新的 Promise 实例。这个新的 Promise 实例会在所有的 Promise 实例都执行完成后 resolve，或者在其中一个 Promise 实例 reject 时 reject。下面我们来看一个简单的例子：
-- -------------------- ---- ------- --- -------- - ------------------- --- -------- - ------------------- --- -------- - ------------------- ---------------------- --------- ------------------------ -- - -------------------- --- -- -- --- -- --
在这个例子中，我们首先定义了 3 个 Promise 实例，分别返回 1、2、3 三个数值。然后我们使用 Promise.all() 方法将这三个 Promise 实例作为参数传入，并在 then() 方法中进行处理。
Promise.all() 方法的特点是，只有当所有的 Promise 实例都执行成功后，它才会返回一个新的 Promise 实例。如果其中一个 Promise 实例执行失败，那么整个 Promise 都会被 reject，并返回第一个 reject 的 Promise 实例的 error。
同时，我们也可以使用 Promise.all() 方法来执行多个异步操作。例如，我们可以将多个请求并行发出，并在得到所有数据后再将它们合并。下面是一个简单的例子：
-- -------------------- ---- -------
--- -------- - --------------------
--- -------- - --------------------
--- -------- - --------------------
---------------------- --------- ----------
----------------- -- ------------------------------------ -- ------------------
--------------- -- -
---------------------
--
-------------- -- -
---------------------
---在这个例子中，我们通过 fetch() 方法向三个不同的 API 发起请求，然后将返回的 Promise 实例放入 Promise.all() 方法中。当所有的请求都完成后，我们调用了 Promise.all() 方法的 then() 方法，并在其中执行一些操作。由于 fetch() 方法返回的是 Promise 实例，所以我们还使用了 Promise.all() 方法将返回的 Response 对象转换为 JSON 数据。
Promise.race()
与 Promise.all() 方法不同，Promise.race() 方法会在其中一个 Promise 实例 resolve 或 reject 后立即返回结果。如果其中一个 Promise 实例 resolve 了，那么 Promise.race() 方法返回 resolve 的 Promise 实例，如果其中一个 Promise 实例 reject 了，那么 Promise.race() 方法返回 reject 的 Promise 实例。
下面我们来看一个简单的例子：
-- -------------------- ---- ------- --- -------- - --- ----------------- ------- -- - ------------------- ----- -------- ---- --- --- -------- - --- ----------------- ------- -- - ------------------- ----- -------- ---- --- ----------------------- ----------------------- -- - ------------------- --- -- --- ------- -
在这个例子中，我们定义了两个 Promise 实例，分别延迟了 1000ms 和 2000ms 后 resolve。然后我们使用 Promise.race() 方法将这两个 Promise 实例作为参数传入。由于第一个 Promise 实例 resolve 的时间比第二个 Promise 实例早，所以 Promise.race() 方法会返回第一个 Promise 实例的结果。
Promise.race() 方法的使用场景非常广泛。例如，我们可以通过 Promise.race() 方法来实现请求超时的功能。下面是一个简单的例子：
-- -------------------- ---- -------
-------- ----------------------- -------- -
--- ------- - -----------
--- -------------- - --- ----------------- ------- -- -
------------- -- ---------- -------------- ----- ------- ---------
---
------ ---------------------- -----------------
-
------------------------------- -----
---------------- -- ----------------
------------ -- -
------------------
--
-------------- -- -
---------------------
---在这个例子中，我们定义了一个函数 requestWithTimeout()，它接收两个参数：URL 和超时时间。这个函数返回一个 Promise 实例，它使用 fetch() 方法向指定的 URL 发送请求，并设置一个超时时间。当超时时间到达时，我们返回一个 reject 的 Promise 实例，否则返回 fetch() 方法返回的 Promise 实例。最后，我们在 then() 方法中处理返回的数据，或者在 catch() 方法中捕获错误。
总结
Promise.all() 和 Promise.race() 是两个非常重要的方法，可以帮助我们高效地解决异步编程问题。Promise.all() 方法可以同时执行多个异步操作，并在所有异步操作完成后返回结果。Promise.race() 方法可以在其中一个异步操作完成后立即返回结果，这个特点非常适合实现请求超时等功能。在实际开发中，我们经常会遇到异步编程的问题，因此熟练掌握 Promise.all() 和 Promise.race() 方法非常有助于提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e2d871f6b2d6eab3e2309f