Rxjs filter应用案例

本文演示了Rxjs filter man的简单应用。

首先在服务中引入Rsjs的相关包
 

import { Observable } from 'rxjs';

参考rxjs7: rxjs7 中文文档https://gitee.com/iceleee/rxjs7

定义第一个异步调用方法：

  getRxjsFun1(){
    return new Observable(subscriber => {
        subscriber.next(1);
        subscriber.next(2);
        subscriber.next(3);
        setTimeout(() => {
            subscriber.next(4);
            subscriber.complete();
        }, 1000);
    });
  }

当订阅上面代码中的 Observable 的时候会立即(同步地)推送值 1、2、3，然后 1 秒后会推送值 4，再然后是完成流
 

  testFun1(){
    var stream = this.requestService.getRxjsFun1();
    stream.subscribe((value)=>{
      console.log(value);
    })
  }

控制台会输出：

1
2
3
1秒钟之后输出：
4
这个例子只是返回单个值，下面测试一下返回一个对象的情况：
 

getRxjsFun2(){   
    const observable = new Observable(subscriber => {
        subscriber.next({
          name:'user1',
          address:'China',
          hobby:'Reading',
          age:25
        });        

        subscriber.next({
          name:'user2',
          address:'China',
          hobby:'Reading',
          age:26
        });       

        setTimeout(() => {
            subscriber.next({
              name:'user3',
              address:'China',
              hobby:'Reading',
              age:27
            });
            subscriber.complete();
        }, 1000);

    });
    return observable;
  }

  testFun1(){
    var stream = this.requestService.getRxjsFun2();
    stream.subscribe((value)=>{
      console.log(value);
    })
  }

{name: 'user1', address: 'China', hobby: 'Reading', age: 25}
{name: 'user2', address: 'China', hobby: 'Reading', age: 26}

1秒钟后返回：
{name: 'user3', address: 'China', hobby: 'Reading', age: 27}

下面测试下增加过滤器的情况：

  testFun3(){
    var stream = this.requestService.getRxjsDemo1();
    stream.pipe(
      filter( (x:any)=> x["age"]>26 )
    ).subscribe((value)=>{
      console.log(value);
    })
  }

这个过滤器只过滤出年龄大于26的用户数据，执行后返回结果如下：
{name: 'user3', address: 'China', hobby: 'Reading', age: 27}