rxjs 级联异步请求

wanger 2022-06-03 收录于前端

场景如下：

发出一个请求，这个请求会返回一个数组；然后再根据这个数组中的每个 item 再发出一个异步请求，返回一个值；最后整理成一个数组返回；

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


import { of, timer, from } from "rxjs";
import { switchMap, map, tap, combineLatestAll } from "rxjs/operators";

const fetch1 = () => {
  return timer(1000).pipe(switchMap(() => of([1, 2, 3, 4])));
};

const fetch2 = (num) => {
  return timer(1000).pipe(switchMap(() => of(num * num)));
};

fetch1()
  .pipe(
    tap(console.log), // 打印查看
    switchMap(from), // 将返回结果作为流发出
    map(fetch2), // 将返回结果中的 item 作为流发出
    combineLatestAll() // 整合结果
  )
  .subscribe((res) => {
    console.log(res);
  });

目录

rxjs 级联异步请求