某需求需要定时发送请求获取最新数据，最简单的是用 setInterval 但是异步请求数据到返回也是需要消耗时间的，这就会导致可能接口还没返回数据，又重复发了请求。更加准确的做法是每次发送请求响应后再开始计时，而使用 rxjs 来做是非常方便的，下面看具体代码。
常见会产生误差处理方式
- 会产生误差的 setInterval 方式
setInterval(() => {
getData();
}, 5000);
function getData() {
return ajax(...)
}rxjs 更准确的时间间隔发定时请求
- 使用 script 引入的 rxjs@5.0.3
// <script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
// 首次 timer 中不填代表立即发送一次请求，后面根据每次请求返回后再隔 5 秒发送一次请求
Rx.Observable.timer().expand(() => Rx.Observable.timer(5 * 1000)
.concatMap(() => getData())
).subscribe(data => {
console.log('received new data', data);
});
// 假设获取数据需要两秒
function getData() {
return Rx.Observable.timer(2000)
}- 使用 Angular5 中框架自带的 rxjs 5.x.x 写法
import { Observable, Subscription } from 'rxjs';
...
timerRequest: Subscription;
...
this.timerRequest = Observable.timer().expand(() =>
Observable.timer(10 * 1000).concatMap(() => this.getData())
).subscribe(data => {
console.log('data'+data);
});
// 在需要取消订阅的地方比如在 ngOnDestroy() 中取消订阅
this.timerRequest.unsubscribe();- 使用 Angular9 中框架自带的 rxjs 6.x.x 写法
import { timer, Subscription } from 'rxjs';
import { expand, concatMap } from 'rxjs/operators';
...
timerRequest: Subscription;
...
this.timerRequest = timer().pipe(expand(() =>
timer(2 * 1000).pipe(concatMap(() => timer(1000)))
)).subscribe(data => {
console.log('data'+data);
});
// 在需要取消订阅的地方比如在 ngOnDestroy() 中取消订阅
this.timerRequest.unsubscribe();这样就完成了使用 rxjs 来定时执行异步代码的功能了
发表评论：