目录

 

RxJS

常用

总览

Observable

Subject

---

RxJS

常用

响应式变成是一种面向数据流和变更传播的异步编程方式，说白了就是简化了异步代码和基于回调的代码。

类别	操作
创建	from, fromPromise,fromEvent, of
组合	combineLatest, concat, merge, startWith , withLatestFrom, zip
过滤	debounceTime, distinctUntilChanged, filter, take, takeUntil
转换	bufferTime, concatMap, map, mergeMap, scan, switchMap
工具	tap
多播	share

异常和重试

import { ajax } from 'rxjs/ajax';
import { map, retry, catchError } from 'rxjs/operators';const apiData = ajax('xxx').pipe(retry(3),map(res => {return res.response;}),catchError(err => of([]))
);apiData.subscribe({next(data) { console.log(data); },error(err) { console.error(err); }
});

总览

Angular中对RxJS的描述不太多，更多的东西还得去看它的官网。

安装：npm install rxjs

引用：import * as rxjs from 'rxjs'; import { of } from 'rxjs'; import { map } from 'rxjs/operators';

Observable

import { Observable } from 'rxjs';const observable = new Observable(function subscribe(subscriber) {try{const intervalId = setInterval(() => {subscriber.next('hi');}, 1000);return function unsubscribe() {clearInterval(intervalId);};
}catch(err){subscriber.error(err);
}
});const unsubscribe = subscribe({next: (x) => console.log(x), error: (error) => { console.error(error)}});unsubscribe();

Subject

与Observable相比，Subject是多播的形式，同时添加了很多特性。

Subject应用：

常规应用:import { Subject } from 'rxjs';export class MissionService {private subject = new Subject<string>();subject$ = this.subject.asObservable();service(value: string) {this.subject.next(value);}
}subject$.subscribe((xxx)=>{})---------------------------------------------------------
多播应用：import { Subject, from } from 'rxjs';const subject = new Subject<number>();subject.subscribe({next: (v) => console.log(`observerA: ${v}`)
});
subject.subscribe({next: (v) => console.log(`observerB: ${v}`)
});const observable = from([1, 2, 3]);observable.subscribe(subject); // You can subscribe providing a Subject// Logs:
// observerA: 1
// observerB: 1
// observerA: 2
// observerB: 2
// observerA: 3
// observerB: 3

BehaviorSubject，可以设定初始值，subscribe订阅时返回的值是从subject.next(xxx)当时的值开始，应用：

import { BehaviorSubject } from 'rxjs';
const subject = new BehaviorSubject(0); // 0 is the initial valuesubject.subscribe({next: (v) => console.log(`observerA: ${v}`)
});subject.next(1);
subject.next(2);subject.subscribe({next: (v) => console.log(`observerB: ${v}`)
});subject.next(3);// Logs
// observerA: 0
// observerA: 1
// observerA: 2
// observerB: 2
// observerA: 3
// observerB: 3

ReplaySubject，可以设置缓存的个数，也就是next()方式执行的次数，执行顺序new=>old，应用：

import { ReplaySubject } from 'rxjs';
const subject = new ReplaySubject(3); // buffer 3 values for new subscriberssubject.subscribe({next: (v) => console.log(`observerA: ${v}`)
});subject.next(1);
subject.next(2);
subject.next(3);
subject.next(4);subject.subscribe({next: (v) => console.log(`observerB: ${v}`)
});subject.next(5);// Logs:
// observerA: 1
// observerA: 2
// observerA: 3
// observerA: 4
// observerB: 2
// observerB: 3
// observerB: 4
// observerA: 5
// observerB: 5

AsyncSubject，在subject.complete执行之后返回最新的值，也就是最后一次next(xxx)中的xxx。和操作符last()功能相似。

 

最后，常用API地址https://rxjs-dev.firebaseapp.com/api。