rxjs-工具类操作

timg (1).jpg

tap

对发射过来的数据执行一个函数，返回原来的数据（即使修改了数据）。例如用于调式打印程序等等作用

import { tap } from "rxjs/operators";
import { interval } from "rxjs";
interval(1000)
  .pipe(tap(_ => console.log(_)))
  .subscribe(x => {});

delay

延迟数据的发射

import { delay } from "rxjs/operators";
import { fromEvent } from "rxjs";
fromEvent(document, "click")
  .pipe(delay(1000))
  .subscribe(x => console.log(x));

timeInterval

其实属于转换操作，将接收到的数据x变成{value:x,interval:数字}的对象，并发射出去。其中value是原本的值，interval是前一个数据与后一个数据的间隔时间

import { timeInterval } from "rxjs/operators";
import { fromEvent } from "rxjs";
fromEvent(document, "click")
  .pipe(timeInterval())
  .subscribe(x => console.log(x));

timestamp

其实也属于转换操作。将接收到的数据x变成{value:x,timestamp:数字}的对象，并发射出去。其中value是原本的值，timestamp是当前时间戳

import { timestamp } from "rxjs/operators";
import { fromEvent } from "rxjs";
fromEvent(document, "click")
  .pipe(timestamp())
  .subscribe(x => console.log(x));

timeout

当指定时间内没有发射数据或者结束（complete）的话，抛出一个error。例如http请求

import { catchError, timeout, retry } from "rxjs/operators";
import { of } from "rxjs";
this.http
  .get<[]>(`http://localhost:4000/users`)
  .pipe(
    timeout(1000),
    retry(1000),
    catchError(err => {
      if (err.name === "TimeoutError") {
        console.error("请求超时：", err);
      } else {
        console.error("http请求错误", err);
      }
      return of([]);
    })
  )
  .subscribe(users => {
    console.log(users);
  });

timeoutWith

类似于timeout，但是接受一个新的数据源。例如http请求，我们可以利用这个操作符来实现当请求超时了返回一个指定值

import { timeoutWith } from "rxjs/operators";
import { of } from "rxjs";
this.http
  .get<[]>(`http://localhost:4000/users`)
  .pipe(timeoutWith(1000, of([])))
  .subscribe(users => {
    console.log(users);
  });

toArray

将一个数据源的所有发射的数据组成一个数组并返回（只有当外部源结束了才会发射）。可以理解为它会将数据缓存着，直到结束了一并发射出去

interval(1000)
  .pipe(
    take(4),
    toArray()
  )
  .subscribe(x => console.log(x));