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

2020-5-17 Jon

某需求需要定时发送请求获取最新数据，最简单的是用 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 来定时执行异步代码的功能了

发表评论：