rxjs 中的 flatMap、mergeMap、switchMap 和 concatMap? [英] flatMap, mergeMap, switchMap and concatMap in rxjs?

问题描述

请大神解释一下SwitchMap和FlatMap在Javascript方面的区别(角度角度，rxjs 5)

据我所知.

SwitchMap 只发出最新的 observable 值并取消之前的 observable.

flatMap 收集所有单独的 observable 并将所有 observable 返回到单个数组中，而无需关心 observable 的顺序.异步工作.

concatMap 保留顺序并发出所有可观察值，同步工作

对吗?

mergeMap 与上面的工作方式有何不同?

谁请举例说明.

解决方案

从 以前的答案:

• flatMap/mergeMap - 立即为任何源项创建一个 Observable，所有先前的 Observable 都保持活动状态
• concatMap - 在创建下一个 Observable 之前等待前一个 Observable 完成
• switchMap - 对于任何源项，完成前一个 Observable 并立即创建下一个
• exhaustMap - 在前一个 Observable 未完成时忽略源项

以下是当源是直接项 (0,1,2,3,4) 并且 map 函数创建一个将每个项延迟 500 毫秒的 Observable 时每个运算符的行为示例:

const { mergeMap、flatMap、concatMap、switchMap、exhaustMap } = Rx.operators;const 示例 = 运算符 =>() =>Rx.Observable.from([0,1,2,3,4]).管道(运算符(x => Rx.Observable.of(x).延迟(500))).subscribe(console.log, () => {}, () => console.log(`${operator.name} completed`));const mm = 示例(合并映射)；const fm = 示例(flatMap)；const cm = 示例(concatMap)；const sm = 示例(开关映射)；const em = example(exhaustMap);

.examples >div {光标:指针；背景色:#4CAF50；白颜色;填充:7px 16px；显示:内联块；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.8/Rx.js"></脚本>
<div onClick='mm()'>mergeMap </div><div onClick='fm()'>flatMap</div><div onClick='cm()'>concatMap</div><div onClick='sm()'>switchMap</div><div onClick='em()'>exhaustMap</div>

Someone, please explain the difference between SwitchMap and FlatMap in terms of Javascript ( in angular perspective, rxjs 5)

In my understanding.

SwitchMap only emits the latest observable value and cancels the previous observable.

flatMap collects all individual observables and returns all observables in a single array without caring about the order of observable. works asynchronously.

concatMap preserve the order and emits all observable value, works synchronously

is that right?

how does mergeMap works differently from above?

someone, please explain with an example.

解决方案

Taking this from a previous answer:

• flatMap/mergeMap - creates an Observable immediately for any source item, all previous Observables are kept alive
• concatMap - waits for the previous Observable to complete before creating the next one
• switchMap - for any source item, completes the previous Observable and immediately creates the next one
• exhaustMap - source items are ignored while the previous Observable is not completed

Here is an example of how each of the operators behaves when the source is immediate items (0,1,2,3,4) and the map function creates an Observable that delays each item by 500ms:

const { mergeMap, flatMap, concatMap, switchMap, exhaustMap } = Rx.operators;

const example = operator => () =>
  Rx.Observable.from([0,1,2,3,4])
  .pipe(
    operator(x => Rx.Observable.of(x).delay(500))
  )
  .subscribe(console.log, () => {}, () => console.log(`${operator.name} completed`));

const mm = example(mergeMap);
const fm = example(flatMap);
const cm = example(concatMap);    
const sm = example(switchMap);
const em = example(exhaustMap);

.examples > div {
  cursor: pointer;
  background-color: #4CAF50;
  color: white;
  padding: 7px 16px;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.8/Rx.js"></script>

<div class='examples'>
  <div onClick='mm()'>mergeMap </div>
  <div onClick='fm()'>flatMap</div>
  <div onClick='cm()'>concatMap</div>
  <div onClick='sm()'>switchMap</div>
  <div onClick='em()'>exhaustMap</div>
</div>

这篇关于rxjs 中的 flatMap、mergeMap、switchMap 和 concatMap?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！