RxJS提供了很多方法用来创建数据流,以下都是常见的用于创建数据流的方法。
1、create 方法
使用 create 方法可以创建一个新的 Observable ,当观察者(Observer)订阅该 Observable 时,它会执行指定的函数。
import { Observable } from 'rxjs';
let ob: Observable<any> = Observable.create((observer: any) => {
observer.next(1);
observer.next(2);
});
ob.subscribe(d => { console.log(d); });
在最新的Angular版本中 Observable.create 方法已经被废弃,推荐使用 new Observable() 替代:
import { Observable } from 'rxjs';
let ob: Observable<any> = new Observable((observer: any) => {
observer.next(1);
observer.next(2);
});
ob.subscribe(d => { console.log(d); });
2、of 方法
使用 of 方法可以创建输出单个值和多值的数据流。输出单个值的示例:
import { of, Observable } from 'rxjs';
let ob: Observable<any> = of([1, 2, 3]);
ob.subscribe(d => { console.log(d); });
// 输出:
// [1,2,3]
当采用序列作为参数时就可以输出多个值:
let ob: Observable<any> = of(1, 2, 3);
ob.subscribe(d => { console.log(d); });
// 输出:
// 1
// 2
// 3
3、from 方法
使用 from 方法创建数据流, 可以从一个数组、类数组对象、Promise、迭代器对象或者类 Observable 对象创建一个 Observable。
import { from, Observable } from 'rxjs';
// 从数组创建Observable
let ob: Observable<any> = from([1, 2, 3]);
ob.subscribe(d => { console.log(d); });
// 输出:
// 1
// 2
// 3
//从Promise创建Observable
let promise = new Promise<any>((resolve) => {
resolve([1, 2, 3]);
});
let ob: Observable<any> = from(promise);
ob.subscribe(d => { console.log(d); });
// 输出:
// [1,2,3]
4、interval 方法
使用 interval 方法创建数据流,可以间隔固定时间发出值。
import { interval, Observable } from 'rxjs';
let ob: Observable<any> = interval(1000);
ob.subscribe(d => { console.log(d); });
//每间隔1秒输出0,1,2,3,4,...
5、timer 方法
使用 timer 方法创建数据流,可以在初始延迟时间后间隔固定时间发出值
import { timer, Observable } from 'rxjs';
let ob: Observable<any> = timer(5000, 1000);
ob.subscribe(d => { console.log(d); });
//5秒钟过后每间隔1秒输出0,1,2,3,4,...
6、fromEvent 方法
使用fromEvent 方法,通过给“事件目标”添加事件监听器的方式创建 Observable。
import { fromEvent } from 'rxjs';
const button = document.querySelector('#btn') as HTMLElement;
let ob: Observable<any> = fromEvent(button, 'click');
ob.subscribe(d => { console.log('button clicked. '); });
7、Subject.asObservable()
在Angular中,可以通过调用 Subject 对象的 asObservable()方法创建数据流:
import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ProcessService {
constructor() { }
/**
* 进度
*/
private progress: Subject<number> = new Subject<number>();
/**
* 进度改变事件
*/
progressChange: Observable<number> = this.progress.asObservable();
/**
* 更新进度
*/
setProgress(process: number) {
this.progress.next(process);
}
}
通过以上代码中的 this.progress.asObservable() 就创建了一个更新操作进度的数据流,可以通过调用 setsetProgress() 方法发送数据,在别的页面通过订阅 proceeService.progressChange.subscribe(); 就可以对发出的进度数据进行响应处理了。
实际上 Subject 的定义就是一种允许多播的 Observable 的扩展。
/**
* A Subject is a special type of Observable that allows values to be
* multicasted to many Observers. Subjects are like EventEmitters.
*
* Every Subject is an Observable and an Observer. You can subscribe to a
* Subject, and you can call next to feed values as well as error and complete.
*
* @class Subject<T>
*/
export declare class Subject<T> extends Observable<T> implements SubscriptionLike {}
RxJS 还有很多方法可以创建 Observable, 具体介绍请参考官方文档,本文只列举了Angular中常用的简单的方法。