Angular 中使用 rxjs 定时请求根据异步请求返回后按间隔定时请求

2020-5-17 Jon angular

某需求需要定时发送请求获取最新数据,最简单的是用 setInterval 但是异步请求数据到返回也是需要消耗时间的,这就会导致可能接口还没返回数据,又重复发了请求。更加准确的做法是每次发送请求响应后再开始计时,而使用 rxjs 来做是非常方便的,下面看具体代码。

常见会产生误差处理方式

  1. 会产生误差的 setInterval 方式
setInterval(() => {
  getData();
}, 5000);
function getData() {
  return ajax(...)
}

rxjs 更准确的时间间隔发定时请求

  1. 使用 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)
}
  1. 使用 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();
  1. 使用 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 来定时执行异步代码的功能了

标签: angular 请求 rxjs async request 异步 定时 间隔 响应

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 ©2015-2022 知向前端
qq:1614245331 邮箱:13515678147@163.com Powered by emlog sitemap