rx.js api使用记录

在 rxjs 库中，mergeMap、switchMap、exhaustMap 和 concatMap 是四个用于处理流中嵌套操作的操作符，它们的行为在处理多个内部 Observable 时各有不同。下面是它们的对比和详解：

1. switchMap

• 行为：只考虑最新的请求，忽略所有之前的请求。

• 适用场景：处理快速切换的用户输入，例如搜索框输入，确保只处理用户的最新输入。

• 示例：

  import { of } from 'rxjs';
  import { switchMap, delay } from 'rxjs/operators';
  
  const source = of(1, 2, 3);
  
  source.pipe(
    switchMap(value => of(value).pipe(delay(1000)))
  ).subscribe(result => console.log(result));
  

  在这个例子中，如果源 Observable 在 1 秒内快速发出多个值，switchMap 将只输出最后一个值。

2. concatMap

• 行为：一个接一个地处理请求，等待每个请求完成后再处理下一个。

• 适用场景：需要顺序处理请求，例如文件上传队列，确保文件按顺序上传。

• 示例：

  import { of } from 'rxjs';
  import { concatMap, delay } from 'rxjs/operators';
  
  const source = of(1, 2, 3);
  
  source.pipe(
    concatMap(value => of(value).pipe(delay(1000)))
  ).subscribe(result => console.log(result));
  

  在这个例子中，值将以 1 秒的间隔一个接一个地输出。

3. mergeMap

• 行为：同时处理所有请求，返回响应的顺序可能与请求的顺序不同。

• 适用场景：并行处理多个独立请求，例如加载多个资源，同时处理所有资源。

• 示例：

  import { of } from 'rxjs';
  import { mergeMap, delay } from 'rxjs/operators';
  
  const source = of(1, 2, 3);
  
  source.pipe(
    mergeMap(value => of(value).pipe(delay(1000)))
  ).subscribe(result => console.log(result));
  

  在这个例子中，所有值将在 1 秒后几乎同时输出。

4. exhaustMap

• 行为：处理第一个请求并忽略其他请求，直到第一个请求完成。

• 适用场景：避免处理快速重复的请求，例如防止按钮重复点击，确保按钮点击只触发一次。

• 示例：

  import { of } from 'rxjs';
  import { exhaustMap, delay } from 'rxjs/operators';
  
  const source = of(1, 2, 3);
  
  source.pipe(
    exhaustMap(value => of(value).pipe(delay(1000)))
  ).subscribe(result => console.log(result));
  

  在这个例子中，只有第一个值会被处理，其他值会被忽略，直到第一个请求完成。

总结

• switchMap：适合需要取消之前请求的场景，只处理最新的请求。
• concatMap：适合需要顺序处理请求的场景，确保一个接一个地处理请求。
• mergeMap：适合需要并行处理多个请求的场景，同时处理所有请求。
• exhaustMap：适合需要防止重复处理的场景，只处理第一个请求，忽略后续请求，直到第一个完成。

选择合适的操作符取决于具体的应用场景和需求。