前言

LeetCode技术栈里包括RxJS, 有一道笔试题也是关于RxJS的, 学习了以后感受到了RxJS的精妙, 学习笔记记下来方便日后查阅.

Observable与Observer的关系

Observable是订阅主体, Observer是订阅者, Observable包含对数据的一系列处理, 最后发送给Observer.

Observable与Observer的代码关系: subscription = observable.subscribe(observer)

Observable

构建Observable的方式, 返回observable:

// 直接创建
import { Observable } from 'rxjs'
Observable.create((observer: any) => {
  observer.next();
  observer.complete();
  observer.error();
}

// 来自一个或多个值
import { of } from 'rxjs'
of('foo', 'bar');

// 来自数组
import { from } from 'rxjs'
from([1,2,3]);

// 来自事件
import { fromEvent } from 'rxjs'
fromEvent(document.querySelector('button'), 'click');

// 无next直接complete
import { empty } from 'rxjs'
empty();

// 永远不会complete
import { never } from 'rxjs'
never();

// 直接抛出错误
import { throwError } from 'rxjs'
throwError(error: any);

// 定时执行, 值为1000表示每秒执行一次
import { interval } from 'rxjs'
interval(num: number);

// 传入一个参数时与interval方法一致, 传入两个参数, 则第一个参数为开始前的等待时长, 第二个参数为之后每个的等待时长
import { timer } from 'rxjs'
timer(num: number, num?: number)

Observer

Observer的格式为:

{
    next: (value: any) => void,
    error: (error: any) => void,
    complete: () => void,
}
或者直接传入函数此时即对应next处理函数

取消订阅

subscription由订阅后返回, 主要用于处理取消订阅: subscription.unsubscribe()