RxJS 中的操作符 switchMap 与 concatMap 的使用场景及区别-JavaScript中文网-JavaScript教程资源分享门户

RxJS 中的操作符 switchMap 与 concatMap 的使用场景及区别

在 RxJS 中，switchMap 和 concatMap 是两个常用的操作符，它们的作用是将 Observable 转换成另一个 Observable，从而实现数据的处理和组合。虽然它们的作用类似，但它们的使用场景和区别还是有一些不同的。

switchMap 的使用场景

switchMap 用于处理一些需要取消之前的 Observable 订阅的场景，例如实现搜索框的自动补全功能。当用户输入新的关键词时，需要取消之前的请求，然后重新发起一个新的请求。这个时候就可以使用 switchMap 操作符来实现。

switchMap 接收一个函数作为参数，这个函数返回一个 Observable，然后将这个 Observable 作为新的数据源。当源 Observable 发出一个新的值时，它会取消之前的订阅，并开始订阅新的 Observable。

下面是一个使用 switchMap 实现搜索框自动补全的示例代码：

// javascriptcn.com 代码示例
import { fromEvent } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { switchMap, debounceTime, distinctUntilChanged, map } from 'rxjs/operators';

const searchBox = document.querySelector('#search-box');

const search$ = fromEvent(searchBox, 'input').pipe(
  debounceTime(500), // 防抖
  map((event: any) => event.target.value),
  distinctUntilChanged(), // 去重
  switchMap((term: string) => ajax.getJSON(`https://api.github.com/search/repositories?q=${term}`))
);

search$.subscribe((data: any) => {
  console.log(data.items);
});

concatMap 的使用场景

concatMap 用于处理需要保持顺序的场景，例如发送多个请求并按顺序进行处理。它会按照源 Observable 发出的顺序依次订阅每个 Observable，并等待每个 Observable 完成后再订阅下一个 Observable。

下面是一个使用 concatMap 实现发送多个请求的示例代码：

// javascriptcn.com 代码示例
import { of } from 'rxjs';
import { concatMap, delay } from 'rxjs/operators';

const requests$ = of(1, 2, 3).pipe(
  concatMap((id: number) => of(`Request ${id}`).pipe(delay(1000)))
);

requests$.subscribe((data: any) => {
  console.log(data);
});

switchMap 和 concatMap 的区别

switchMap 和 concatMap 的区别在于它们处理 Observable 的方式不同。switchMap 会取消前一个 Observable 的订阅，然后订阅新的 Observable，而 concatMap 会等待前一个 Observable 完成后再订阅下一个 Observable。

因此，当需要处理一些需要取消之前订阅的场景时，应该使用 switchMap，而当需要保持顺序的场景时，应该使用 concatMap。

总结

switchMap 和 concatMap 是 RxJS 中常用的操作符，它们可以帮助我们将 Observable 转换成另一个 Observable，实现数据的处理和组合。它们的使用场景和区别还是有一些不同的，需要根据具体的场景来选择使用哪个操作符。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650c3dae95b1f8cacd647c20