【Angular中的RxJS】- 创建数据流

        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中常用的简单的方法。

猜你喜欢

转载自blog.csdn.net/evanyanglibo/article/details/122143007