RxJs 应用于 http 请求

李鹏坤 / 2020-11-15


一、RxJs 概述

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

RxJs 核心概念

二、请求的 3 个情况

1. 单个请求

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

2. 多个 api 并发

// 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

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

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)
)