RxJS之工具操作符 ( Angular环境 )

一 delay操作符

源Observable延迟指定时间，再开始发射值。

import { Component, OnInit } from '@angular/core';
import { of } from 'rxjs/observable/of';
import { delay } from 'rxjs/operators/delay';

@Component({
  selector: 'app-util',
  templateUrl: './util.component.html',
  styleUrls: ['./util.component.css']
})
export class UtilComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    console.log(new Date());
    of('Mike', 'Leo').pipe(delay(1000))
      .subscribe(val => {
        console.log(new Date(), val);
      });
  }
}

二 do/tap操作符

do、tap ( 窃听 ) 是两个完全相同的操作符，用于窃听Observable的生命周期事件，而不会产生打扰。

import { Component, OnInit } from '@angular/core';
import { of } from 'rxjs/observable/of';
import { tap } from 'rxjs/operators/tap';

@Component({
  selector: 'app-util',
  templateUrl: './util.component.html',
  styleUrls: ['./util.component.css']
})
export class UtilComponent implements OnInit {

  constructor() { }

  ngOnInit() {

    // tap在subscribe之前执行
    of('Mikey', 'Leo').pipe(
      tap(
        val => {
          console.log('tap next', val);
        },
        null,
        () => {
          console.log('tap complete');
        }
      )
    )
      .subscribe(
        val => {
          console.log('subscribe next', val);
        },
        null,
        () => {
          console.log('subscribe complete');
        }
      );

    // 没有订阅，tap不执行
    of('Raph', 'Don').pipe(
      tap(
        val => {
          console.log('tap next', val);
        },
        null,
        () => {
          console.log('tap complete');
        }
      )
    );
  }
}