在进行前端开发时，我们经常需要在多个异步操作中选择最先完成的一个来进行后续操作。此时，我们就可以使用 Promise race（Promise 竞速）机制。Promise race 可以用来在多个 Promise 之间进行竞速操作，从而提高程序的执行效率。本文将详细介绍 Promise race 的实现和用例，帮助读者掌握这一重要的技术。
Promise race 的实现
Promise race 可以理解为是多个 Promise 之间的竞速操作。当多个 Promise 同时执行时，只要有一个 Promise 结束了操作，就会立即触发 race 的回调函数，并返回第一个完成的 Promise 的结果。Promise race 的语法如下：
Promise.race(promises).then(successCallback, errorCallback);
其中，promises 为需要竞速的多个 Promise 组成的数组。successCallback 和 errorCallback 分别是成功和失败回调函数。
Promise race 的实现可以通过构造一个新的 Promise 对象，并在其内部进行异步操作来实现。Promise race 内部会维护一个 winner 变量，用于存储完成操作的 Promise。
示例代码如下：
-- -------------------- ---- -------
-------- --------------------- -
------ --- ----------------- ------- -- -
--- ------ - -----
------------------------ -- -
------------------- -- -
-- --------- -
------ - --------
----------------
-
-------------- -- -
-- --------- -
------ - --------
--------------
-
---
---
---
-上述代码首先构造了一个新的 Promise 对象。然后，它使用 forEach 循环遍历传入的 Promise 数组，并通过使用 Promise 的 then 方法来进行异步操作。如果 winner 变量为空，并且 Promise 完成了操作，就将当前 Promise 赋值给 winner 并通过 resolve 或 reject 方法返回 Promise 结果。注意，如果 winner 变量已经有值时，后续 Promise 将被忽略。
Promise race 的用例
实际开发场景中，Promise race 的用例非常丰富。下面，我们将介绍两个经典的使用场景。
图片加载竞速
在网页开发中，我们需要经常加载多张图片。由于网络的不稳定性，有时某些图片的加载无法完成，我们需要在加载完毕的图片中选择最先加载完成的一张进行后续操作。此时，我们可以使用 Promise race。
示例代码如下：
-- -------------------- ---- -------
-------- ----------------- -
----- -------- - -------------- -- -
------ --- ----------------- ------- -- -
----- --- - --- --------
------- - -----
---------- - -- -- -
--------------
--
----------- - -- -- -
-------------
--
---
---
------ -----------------------
-上述代码中，我们定义了一个函数 loadImages，它接受一个文件路径的数组 paths 作为参数。我们使用 Array 类型的 map 方法遍历 paths 数组，并使用 Promise 机制，构造一组 Promise 对象。当图片加载成功时，Promise 返回文件路径；当图片加载失败时，Promise 则返回错误信息。
最后，我们使用 Promise.race 方法来运行 Promise 竞速操作，并返回加载最先完成的图片路径。
支付接口竞速
在移动端应用开发中，我们经常需要与第三方支付接口进行交互。当我们需要进行支付时，我们通常需要依次向不同的支付平台发起请求，直到有一方成功接受我们的请求并处理完成支付。此时，我们同样可以使用 Promise race。
示例代码如下：
-- -------------------- ---- -------
-------- -------------- -
----- -------- - ---
----------------- ----------------- ------- -- -
------------------------------- -- -
-- -------------- --- ---------- -
------------------------
- ---- -
------------------------
-
---
----
----------------- ----------------- ------- -- -
------------------------------- -- -
-- -------------- --- ---------- -
------------------------
- ---- -
------------------------
-
---
----
----------------- ----------------- ------- -- -
------------------------------- -- -
-- -------------- --- ---------- -
------------------------
- ---- -
------------------------
-
---
----
------ -----------------------
-上述代码中，我们定义了一个函数 pay，它接受一个订单的信息 orderInfo 作为参数。我们使用 Promise 机制，构造了一组 Promise 对象，分别代表与不同支付平台的交互。当该支付平台接受我们的请求并成功处理完成支付时，Promise 对象返回支付流水号；当发生错误时，Promise 则返回错误信息。
最后，我们使用 Promise.race 方法来运行 Promise 竞速操作，并返回第一个完成支付的支付流水号。
结论
Promise race 是前端开发中非常重要的技术之一，可以用来在多个操作之间进行竞速操作，从而提高程序的执行效率。在实际开发场景中，Promise race 的用例非常丰富，例如图片加载竞速和支付接口竞速。本文详细介绍了 Promise race 的实现和用例，希望能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67723cd86d66e0f9aad609f6