RxJS 中的 concatMap 和 switchMap 的区别及使用场景

前言

RxJS 是一个流行的 JavaScript 库，它提供了一种响应式编程的方式，可以将异步操作变得简单易懂。RxJS 中有许多操作符，其中 concatMap 和 switchMap 是两个常用的操作符。本文将介绍它们的区别及使用场景，并提供示例代码。

concatMap 和 switchMap 的区别

concatMap

concatMap 操作符将每个源值映射为一个 Observable，然后将这些 Observable 按顺序连接起来，依次发出值。它的作用类似于 Array.prototype.map() 方法，但是它返回的是一个 Observable，而不是一个数组。

下面是一个示例代码：

const source = Rx.Observable.from([1, 2, 3]);
const example = source.concatMap(val => Rx.Observable.of(val + 10));
example.subscribe(val => console.log(val));
// 输出：11, 12, 13

在上面的代码中，concatMap 操作符将每个源值加上 10 后，依次发出值。由于 concatMap 会等待前一个 Observable 完成后，才会订阅下一个 Observable，因此它保证了顺序性。

switchMap

switchMap 操作符将每个源值映射为一个 Observable，然后将这些 Observable 打平成一个 Observable，只发出最新的值。它的作用类似于 Array.prototype.flatMap() 方法，但是它返回的是一个 Observable，而不是一个数组。

下面是一个示例代码：

const source = Rx.Observable.from([1, 2, 3]);
const example = source.switchMap(val => Rx.Observable.of(val + 10));
example.subscribe(val => console.log(val));
// 输出：11

在上面的代码中，switchMap 操作符只发出最新的值，因此只输出了 11。由于 switchMap 会取消之前的 Observable 订阅，因此它不保证顺序性。

concatMap 和 switchMap 的使用场景

concatMap

concatMap 适合处理需要顺序性的场景。例如，当我们需要按顺序发送多个 HTTP 请求时，可以使用 concatMap 操作符。下面是一个示例代码：

const urls = ['url1', 'url2', 'url3'];
const requests = urls.map(url => Rx.Observable.ajax.getJSON(url));
const example = Rx.Observable.from(requests).concatMap(request => request);
example.subscribe(response => console.log(response));

在上面的代码中，我们将多个 HTTP 请求转换为一个 Observable，并使用 concatMap 操作符保证了它们的顺序性。

switchMap

switchMap 适合处理需要取消之前的订阅的场景。例如，当我们需要处理用户输入时，可以使用 switchMap 操作符。下面是一个示例代码：

const input = document.querySelector('input');
const example = Rx.Observable.fromEvent(input, 'input')
  .map(event => event.target.value)
  .switchMap(value => Rx.Observable.ajax.getJSON(`/api/search?q=${value}`));
example.subscribe(response => console.log(response));

在上面的代码中，我们使用 switchMap 操作符，当用户输入时取消之前的订阅，并发送最新的 HTTP 请求。

总结

本文介绍了 RxJS 中的 concatMap 和 switchMap 操作符，它们的区别及使用场景。concatMap 保证了顺序性，适合处理需要顺序性的场景；switchMap 取消了之前的订阅，适合处理需要取消之前的订阅的场景。在实际开发中，我们可以根据具体的需求选择合适的操作符。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c46394add4f0e0ffedd68c