rxjs 之 map 操作

常用的几种 map: map/mapTo/switchMap/exhaustMap/mergeMap/concatMap

Rxjs里常用的几种 map 操作：

• map
• mapTo
• switchMap
• exhaustMap
• mergeMap(flatMap)
• concatMap

自己的一些理解：

1. 本质上他们都是 map 方法
2. 不改变类型的 map，如 number in, number out，使用 map
3. 将值映射成固定值用 mapTo
4. 需要将值映射成 observerble 的，请使用 switchMap/exhaustMap/mergeMap/concatMap

几种 Map 操作的一些区别：

• 当 actions 既不应该被中止，也不应该被忽略，并且其次序也必须保持不变，请使用 concatMap。它也是个保守的选择，因此其行为总是可以被预测的。
• 当 actions 既不应该被中止，也不应该被忽略，并且其次序并不重要，请使用 mergeMap。
• 和读取相关的 actions，并且当有同类型的 action 发出时这些原有 actions 应该被中止，请使用 switchMap (example: autocomplete)
• 当有同类型的 action 发出时，原有的 actions 应该被忽略，请使用 exhaustMap。 (example: 一次重要的提交操作)

场景1：使用  switchMap 完成 api 的 get 请求操作

import { defer, of, fromEvent, from } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';

const btn1 = document.getElementById('btn1');
const $click = fromEvent(btn1, 'click');
const data$ = switchMap(() => fetch('https://api.github.com/users/afeiship'));

$click
  .pipe(
    data$,
    switchMap((v) => v.json())
  )
  .subscribe((e) => {
    console.log('response: ', e);
  });

参考:

https://zhuanlan.zhihu.com/p/55199532