mergeMap、switchMap、concatMap、exhaustMap 之间的区别

您好，在作为 Angular 开发人员进行面试时，您可能会被问到几个有关 RxJ 运算符及其差异的问题。

最常见的问题之一是“mergeMap、switchMap、concatMap、exhaustMap 有什么区别？”

让我们深入探讨并用简单的术语解释它们。

我将使用一个简单的例子来解释行为上的差异：

import { interval, take, tap, from } from 'rxjs';
import {
  switchMap,
  mergeMap,
  concatMap,
  exhaustMap,
} from 'rxjs/operators';

const mapOperators = [
  mergeMap,
  switchMap,
  concatMap,
  exhaustMap
];

const selectedMap = mapOperators[0]; // <- Change operator index here

const clicks$ = from(['First Click', 'Second Click', 'Third Click']).pipe(
  tap(console.log),
);

clicks$
  .pipe(
    selectedMap((click: number) =>
      interval(500).pipe(
        tap((intervalValue: number) =>
          console.log(
            `${click} Value: ${intervalValue}`
          )
        ),
        take(3)
      )
    )
  )
  .subscribe();

在您可以在 Stackblitz 上进行实验的代码示例中，您可以看到 3 次用户点击的模拟

现在，让我们看看每个运算符将返回什么

合并地图

First Click
Second Click
Third Click
First Click Value: 0
Second Click Value: 0
Third Click Value: 0
First Click Value: 1
Second Click Value: 1
Third Click Value: 1
First Click Value: 2
Second Click Value: 2
Third Click Value: 2

mergeMap 运算符并行运行排放，这就是你看到的原因

First Click Value: 0
Second Click Value: 0
Third Click Value: 0

值为 0

切换地图

First Click
Second Click
Third Click
Third Click Value: 0
Third Click Value: 1
Third Click Value: 2

switchMap 运算符将在每次新点击后取消前一个，在我们的例子中，第一次点击将被第二次点击取消，第二次点击将被取消被第三次点击取消，结果我们将看到第三次点击值

Third Click Value: 0
Third Click Value: 1
Third Click Value: 2

ConcatMap

First Click
Second Click
Third Click
First Click Value: 0
First Click Value: 1
First Click Value: 2
Second Click Value: 0
Second Click Value: 1
Second Click Value: 2
Third Click Value: 0
Third Click Value: 1
Third Click Value: 2

concatMap 运算符将记住所有点击，并以相同的顺序 console.log 它们，在我们的例子中，第一次点击，第二次点击，第三次点击为你在控制台中看到

First Click Value: 0
First Click Value: 1
First Click Value: 2
Second Click Value: 0
Second Click Value: 1
Second Click Value: 2
Third Click Value: 0
Third Click Value: 1
Third Click Value: 2

排气图

First Click
Second Click
Third Click
First Click Value: 0
First Click Value: 1
First Click Value: 2

exhaustMap 运算符将阻塞流，直到第一次点击完成，在我们的例子中，第二次点击和第三次点击将被忽略

First Click Value: 0
First Click Value: 1
First Click Value: 2

现在您了解了这些运算符之间的差异，您可以想象选择错误的后果

以上是mergeMap、switchMap、concatMap、exhaustMap 之间的区别的详细内容。更多信息请关注PHP中文网其他相关文章！