RxJS 是 ReactiveX 编程理念的JavaScript 版本。他是针对异步数据流的编程,简单的说就是将一切数据,包括HTTP请求,DOM事件或者普通数据等包装成流的形式,然后用强大丰富的操作符对流进行处理,使你能够以同步编程的方式处理异步数据,并组合不同的操作符来轻松实现你所需要的功能。
RxJS是一种针对异步数据流工具,Angular引入RxJS就是为了让异步可控、更简单。
常见的异步编程的几种方法
1.回调函数
2.事件监听/发布订阅
3.Promise
4.RxJS
同步和异步的不同
首先这里定义了两个方法,一个是同步,一个是异步。
getData(): string {
return '这个是同步方法返回';
}
getCallBackData() {
setTimeout(() => {
return '这个是回调异步方法返回';
}, 1000);
}
如果直接调用的话,第二个getCallBackData() 是打印出了一个undefined,如下图的调用方式
// 同步调用
const syncData = this.request.getData();
console.log(syncData);
// 异步调用
const asyncData = this.request.getCallBackData();
console.log(asyncData); //打印出undefined
第一种解决方式:回调函数
定义一个回调函数,来等data拿到时再执行并且返回。这里使用的es6的箭头函数,所以看起来比较简洁。
getCallBackData(func: ( value: string) => void) {
setTimeout(() => {
func('这个是回调异步方法返回');
}, 1000);
}
// 异步调用
this.request.getCallBackData((data: string) => { console.log(data); });
这样就是传进去一个函数参数,让这个函数拿到值再返回。这样就可以打印出异步函数中的数据了。
第二种解决方式:promise
promise返回一个promise 对象,resolve是成功的返回,reject是失败的返回。
getPromiseData(): Promise<string> {
return new Promise((resolve, reject) => {
setTimeout( () => {
resolve('这是Promise的异步方法返回');
reject('失败了...');
}, 1000);
});
}
// 异步调用 promise 获取
this.request.getPromiseData().then((data: string) => {
console.log(data);
});
第三种解决方式:RxJS
和promise比较类似,但是这里使用的Observable去分发,调用端去订阅。
getRxJSData() {
return new Observable((observer) => {
setTimeout( () => {
observer.next('这是Rxjs的异步方法返回');
// observer.error('失败了...');
}, 1000);
});
}
// 异步调用 rxjs 获取
this.request.getRxJSData().subscribe( (data) => {
console.log(data);
});
rxjs 和 promise 的基础用法比较相似,但是rxjs其实比promise强大的多,比如rxjs可以中途撤回,rxjs可以发射多个值,rxjs提供了多种工具函数。
#######RxJS取消订阅
通过 unsubscribe() 方法来实现超时取消订阅取消订阅,
// 异步调用 rxjs 超过 2s 自动撤回
const stream = this.request.getRxJSData().subscribe( (data) => { console.log(data); });
setTimeout( () => { stream.unsubscribe(); }, 2000);
RxJS多次订阅
每隔1s中再次获取异步方法中的数据。多次执行。
getRxJSIntervalData() {
let count = 0;
return new Observable<string>( (observer) => {
setInterval( () => {
count++;
observer.next(`这是RxJS的异步方法返回 ${count}`);
}, 1000);
});
}
// 异步调用 rxjs 每隔 1s 自动触发订阅
this.request.getRxJSIntervalData().subscribe( (data) => {
console.log(data);
});
RxJS的工具函数
RxJS的工具函数很多,但是这里只举例说明两个,map和filter。
- map 和 filter
fileter很好理解,就是过滤,而map也好理解,如python的map高阶函数一样。
网友评论