前言
随着前端应用越来越复杂, 服务端API的调用也逐渐变得复杂起来。这时，遇到并发请求便成了一个非常普遍的问题。RxJS 是一个反应式(Reactive)编程库，它提供了非常方便的方法来处理并发请求。
RxJS
RxJS 是一个响应式编程库，它是 ReactiveX 函数编程库系列之一，它可以帮助你更优雅地处理常见的异步问题。
RxJS 操作符可以帮助我们在处理异步任务时应对复杂场景，解决在面对大量异步操作请求的时，JavaScript 过于拥挤的回调地狱问题，并提供了大量功能丰富且高效的操作符和工具。
如何处理并发请求
RxJS 对于异步处理的理念其实是使用类似于发布和订阅模式的方式来处理数据流。在 RxJS (RxJS 6及以上) 中，你可以使用 mergeMap 操作符来处理异步操作。简单阐述一下 mergeMap:
将 流中的每一个值转化为一个新的 Observable，然后 将这些新的 Observables 打平到一条单独的流中，依次发出每个新生成的 Observable 中的每一个值。
像上图所示，订阅发射源的流，每发出一个值，就得到一个新的流。在顶部内部创建的流插入到总的流中，如图中笛卡尔坐标系所示。总的流会发出所有流处理下来的结果。
mergeMap 可以被完美用于处理并发请求。你可以将所有请求的结果合并并通过一个订阅一次简单地处理这些结果。这将使代码整洁且易于理解。
-- -------------------- ---- -------
------ - -------- - ---- -----------------
------ - ---- - ---- ------------
------ - -------- - ---- -------
----- ------ - --------------------------------------- ------------------------------------------
----- --------- - --- --
--- --------------- -- ------------- -- ---------------- --------- --------- -------
----- ------- - ---------
-- -----------------
----------------- -- -------------------
-- -----------------------
-------------------------------------------------------
-- ---------
--------------------- ------------------
---------- -- ---------------------
-- ------------------------
---------------- -- -------
-
--
----- --------- - --------------------- -- ------------------在上面的代码中，我们使用 forkJoin 对所有请求进行合并，然后将其发送到订阅中。完成后，我们可以通过一个 subscribe 来处理它们。mergeMap 则在你需要发出异步调用时处理发射的请求。
总结
使用 RxJS 来处理并发请求可以将复杂的代码变得更加简单。这对于处理大量异步操作的场景非常有用。在 RxJS 中，mergeMap 操作符可以被用于处理异步操作。你可以将 mergeMap 这个操作符和 RxJS 的强大的功能组合起来，防止回调地狱问题以及其他类似的问题。
RxJS 的一些操作符非常适合处理并发请求。上面的示例代码中，forkJoin 以相同的顺序返回结果，如果只需要发送一次请求，那么 mergeMap 就是首选了。
参考文章
示例代码
-- -------------------- ---- -------
------ - -------- - ---- -----------------
------ - ---- - ---- ------------
------ - -------- - ---- -------
----- ------ - --------------------------------------- ------------------------------------------
----- --------- - --- --
--- --------------- -- ------------- -- ---------------- --------- --------- -------
----- ------- - ---------
-- -----------------
----------------- -- -------------------
-- -----------------------
-------------------------------------------------------
-- ---------
--------------------- ------------------
---------- -- ---------------------
-- ------------------------
---------------- -- -------
-
--
----- --------- - --------------------- -- ------------------上述代码在执行时，将发出所有针对提供的 URL 的 AJAX 调用，然后将它们合并到一个 Observable 中，等到它们全部完成之后，将返回一个包含所有结果的数组对象。此外，我们还使用了 promise 来创建异步操作，mergeMap 操作符中的 switchMap 函数可以很好地解决的异步回调地狱问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ad99a968c7c53b0a5283a