最近几年，JavaScript 社区快速地将 RxJS 库集成到其项目中。RxJS 通过提供丰富的操作符和回调函数，改变了前端开发的方式。而 race 操作符是其中一个重要的操作符之一。
什么是 race 操作符
race 操作符使用两个或多个 Observables，返回第一个发送任何新消息的 Observable。举一个简单的例子，我们可以在初始化应用程序时请求两个不同的 API。第一个 API 返回正确的数据，而第二个API返回错误的数据。我们不想显示有错误的数据，而希望直接使用第一个API的结果。因此，我们可以使用 race 操作符来等待两个 API 的响应，当第一个 API 发送一个结果时，race 操作符返回这个结果，并取消订阅另一个 API。这样，我们就不会浪费请求错误数据的时间。
如何使用 race 操作符
我们来看一下 race 操作符的语法：
import { race } from 'rxjs';
race(observables: Observable<any>[]): Observable<any>;在这个 observable 数组中，传递所有要使用的 Observables。race 操作符不适用单个 Observable，它需要至少两个可观察对象。返回的 Observable 是最先发送值的 Observable，同时会取消其他的 Observable 订阅。因此，我们不必手动取消其他的 Observable 订阅。
为了理解 race 操作符更好，让我们看一个实际的例子。假设我们有一个应用程序，它请求两个不同的 API。我们对每个 API 调用使用 timer 操作符来模拟延迟，以便能够看到调用的race 操作。请注意，这是一个非常简单的例子，用于解释race 操作符。
-- -------------------- ---- -------
------ - --- ------ ---- - ---- -------
------ - ----- - ---- -----------------
----- ----- - -------- ---- --- -----------------------------
----- ----- - -------- ---- --- -----------------------------
------------ ------------------
---------- -- -
----------------------
--
----- -- -
--------------------- -----
-
--在这个示例代码中，我们定义两个 Observable：api1$ 和 api2$。通过观察代码，我们可以看出 api1$ 比 api2$ 慢。为了让api1$ 在一个较长时间内返回，我们使用了 delay 操作符。需要注意的是，delay 操作符返回一个转换后的 Observable，所以我们需要使用管道运算符pipe。race 操作符在 api1$ 和 api2$ 数组中等待，并订阅第一个具有值的 observable。我们希望输出 api2$ 的值，因为它较快，但我们可以看到输出结果是 api1$ 的值。这是因为 race操作符已经取消了api2$ observable 的订阅。
总结
race 操作符在 RxJS 中具有很大的指导意义，因为它可以帮助我们等待多个 Observables，以便在返回之前，取消其他订阅。在大多数情况下，我们不想等待所有 observables 都返回结果，因此 race 操作符通常是“静默失败”的一种替代方法，这意味着我们可以忽略不需要的订阅。希望这篇 RxJS 中的 race 操作符文章对了解 race 操作符的使用和使用场景有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a77caaadd4f0e0ff09c88d