本文演示了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}