如何使用 angular observables 在重复时间间隔内从 API 检索数据

Question

我想通过一个实际的例子来理解 observables。假设只要 APP 处于运行状态，我想每 1 分钟进行一次 API 调用。目前我正在使用 setInterval 函数进行操作，如下所示：

ngOnInit() {

    setInterval(val => this.getDataFromAPI(), 60000)

}

getDataFromAPI() {
    this.dataServices.getDataFromAPI().subscribe((data: any) => {
        this.gaugeData = data;
    },
    error =>{
        console.log('error')
    });
 }

在 dataServices 文件中有一个方法 'getDataFromAPIwhich is responsible of making theHTTP` 调用。

getDataFromAPI
    return this.http.get(this.base_url + this.endPoint, {
        headers: {
            'tokenid': this.tokenId,
            'accountid': this.accountId'
        }, params: { groupId: groupId, date: '2020-10-05T11:30:00-07:00' }
    })
    .toPromise().then(res => {
        return res;
    });
}

上面的例子工作得很好，但正如这篇文章Understanding RxJS Observables and why you need them中提到的那样。他们有不同的方式来创建和使用带有订阅的可观察对象。如何在我提供的示例中创建和使用可观察对象？

Answer 1

gaugeData = new BehaviorSubject<any>({});

ngOnInit() {
    setInterval(val => this.getDataFromAPI(), 1000)
}

getDataFromAPI() {
    this.dataServices.getDataFromAPI().toPromise().then((data: any) => {
        this.gaugeData.next(data);
    }).catch(error => {
        console.log('error')
    });
}

首先将 gaugeData 指定为可观察对象，然后每隔 1 秒调用 api，然后将新值传递给 gaugeData。

Answer 2

您可以将 timer 与 mergeMap 结合使用。
你已经有了这个可观察的：

const apiCall = this.dataServices.getDataFromAPI()

您将不得不创建另一个可观察对象，这将在 1 秒后启动一个可观察对象，他将每 1 秒发出一次：

const myTimer = timer(1000, 1000)

在您的组件中创建一个空订阅，这将使您能够稍后取消订阅：

sub: Subscription

现在您可以在ngOnInit():

内进行订阅

ngOnInit() {
  const apiCall = this.dataServices.getDataFromAPI()
  const myTimer = timer(1000, 1000)
  this.sub = myTimer
    .pipe(
      mergeMap( () => this.dataServices.getDataFromAPI() )
    )
    .subscribe( data => this.gaugeData = data )
}

完成后不要忘记退订，否则会内存泄漏：

ngOnDestroy() {
  this.sub.unsubscribe()
}

我有一个演示 here 如果你想查看，请在 index.ts

中搜索 Custom API call

如何使用 angular observables 在重复时间间隔内从 API 检索数据

How to use angular observables to retrieve data from API within a repetitive time interval

observable

angular

angular7