rxjs工具操作符

一 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');

            }

        )

      );

   }

}