Rxjs学习总结

---

Rxjs基础学习总结

以下是近期学习Rxjs基础的一些总结，step by step

rxjs获取异步数据：

//引入
import {Observable} from 'rxjs';
// request.service.ts
getRxjsData(){
    return new Observable((observer)=>{
        setTimeout((){
            var username = 'zhangsan--rxjs';
            observer.next(username);        //类似resolve，发送要返回的数据username
            observer.error('数据');        //类似reject，出现错误
        },2000);  
    })
}
//使用
var rxjsData = this.request.getRxjsData();
    rxjsData.subscribe((data)=>{           //类似.then  通过subscribe获取返回的数据data
    console.log(data);
})

Observable可以中途撤回：

也就是取消订阅，取消方法的执行。
例子：过一秒钟后，取消上面getRxjsData方法的执行。

var rxjsData = this.request.getRxjsData();
var d = rxjsData.subscribe((data)=>{           //将subscribe赋给一个变量d
    console.log(data);
})
setTimeout(()=>{
    d.unsubscribe();           //用d去取消订阅
},1000)

rxjs订阅后多次执行：

promise没有执行多次的能力

getRxjsIntervalData(){
    var count = 0;
    return new Observable<any>((observer)=>{
        setInterval((){
            count++;
            var username = 'zhangsan--rxjs--Interval'+count;
            observer.next(username);       //可以源源不断的获取异步的数据
        },2000);  
    })
}
var streamInterval = this.request.getRxjsIntervalData();
streamInterval.subscribe((data)=>{
    console.log(data);
})

rxjs的工具函数：map和filter

map和filter
filter对数据进行过滤
map对数据进行处理
然后再拿到数据

//引入
import {map, filter} from 'rxjs/operators'
//用工具方法对返回的数据进行处理
getRxjsIntervalNumber(){
    var count = 0;
    return new Observable<any>((observer)=>{
        setInterval((){
            count++;
            observer.next(count);       //可以源源不断的获取异步的数据
        },1000);  
    })
}
var streamNum = this.request.getRxjsIntervalNumber();
//想筛选出偶数,并且和自己相乘
streamNum.pipe(      //利用pipe(),工具方法可以多个一起使用，本例子通过pipe将filter和map一起使用
    //过滤成只要偶数
    filter((value)=>{
         if(value%2===0){
             return true;
         }   
    }),
    //将拿到的数据处理成和自己相乘
    map((value)=>{
        return value*value;
    })        
).subscribe((data)=>{
    console.log(data);
})