RxJS-Observable Operators - concatMap, mergeMap,switchMap

其实就是map 加上concatAll、mergeMap、 switchMap的简化写法

const body = document.body;
const click = fromEvent(body, 'click')
    .pipe(
        map(e => interval(500).pipe(take(3)),    //  每500ms送出值,输出三次
        concatAll()
    );

click.subscribe(d => console.log(d));
/**
 * 点击后
 * 0
 * 1
 * 2
 * 3
 */

使用concatMap简化后

const body = document.body;
const click = fromEvent(body, 'click')
    .pipe(
        concatMap(e => interval(500).pipe(take(3)))
    );

click.subscribe(d => console.log(d));
/**
 * 点击后
 * 0
 * 1
 * 2
 * 3
 */
至于在使用上要如何选择这三个operators？其实都还是看使用情境而定。(建议初学者不确定选哪一个时，使用switchMap)
  • concatMap用在可以确定内部的observable结束时间比外部observable发送时间来快的情境，并且不希望有任何并行处理行为，适合少数要一次一次完成到底的的UI动画或特别的HTTP request行为。
  • switchMap 用在只要最后一次行为的结果，适合绝大多数的使用情境。
  • mergeMap 用在并行处理多个observable，适合需要并行处理的行为，像是多个I/O 的并行处理。