RxJS 应用于 http 请求

李鹏坤 / 2020-11-15

一、RxJS 概述

RxJS 是一个专门处理 异步 或 事件 的函数库

RxJS 核心概念

二、请求的 3 个情况

1. 单个请求

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

getListRequest().pipe(
  finalize(() => {
    // api 调用，最终执行
  })
).subscribe(
  next: (result: any) => {
    // 返回结果
  },
  error: (error) => {
    // 出错
  },
  complete: () => {
    // 完成，api 出错时不会走到这里
  }
)

2. 多个 api 并发

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// forkJoin 将等待所有传递的可观测值完成，然后它将发出一个数组或对象，具有来自相应可观测值的最后一个值
forkJoin(
  [
    getFirstListRequest(),
    getSecondListRequest(),
  ]
).pipe(
    finalize(() => {
      // 全部 api 调用，最终执行
    })
).subscribe(
  next: (result: any[]) => {
    // 返回结果
    consolse.log(`第一个 api 返回结果：${result[0]}，第二个 api 返回结果：${result[1]}`);
  },
  error: (error) => {
     // 出错
  },
  complete: () => {
    // 全部 api 调用完成，有 api 出错时不会走到这里
  }
)

3. 嵌套调用 api

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

updateListRequest().pipe(
  finalize(() => {
    // api 调用，最终执行
  })
).subscribe(
  next: (result: any) => {
    // 返回结果
  },
  error: (error) => {
    // 出错
  },
  complete: () => {
    // 完成，api 出错时不会走到这里
    this.load();
  }
)

load() {
  getListRequest().pipe(
    finalize(() => {
    // api 调用，最终执行
    })
  ).subscribe(
    next: (result: any) => {
    // 返回结果
    },
    error: (error) => {
    // 出错
    },
    complete: () => {
    // 完成，api 出错时不会走到这里
    }
  )
}

RxJS 操作符之 merge、map、mergeAll、mergeMap

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

const { fromEvent, interval } = rxjs;
const { merge, map, mergeAll, mergeMap } = rxjs.operators;

const click$ = fromEvent(document.documentElement, 'click');
const interval$ = interval(1000);

// merge 就是将两个流按时间顺序合并起来
click$.pipe(
  merge(interval$)
).subscribe(
  val => console.log(val)
)

// map 的作用使鼠标每点击一次，产生一个 interval
click$.pipe(
  map(() => interval$)
).subscribe(
  interval => interval.subscribe(
      num => console.log(num)
  )
)

// mergeAll 将上述两次 subscribe 合并成一次（多阶降为一阶）
click$.pipe(
  map(() => interval$),
  mergeAll()
).subscribe(
  num => console.log(num)
)

// mergeMap 合并了 map 和 mergeAll
click$.pipe(
  mergeMap(() => interval$)
).subscribe(
  num => console.log(num)
)
完