使用 setInterval() 的 HTTP 轮询每 1 秒调用一次，而不是提到的间隔

Question

我的 Ionic 4 应用程序有一个要求，我需要每 20 秒调用一次 API。当我使用setInterval()它时，API 每 1 秒而不是 20 秒命中一次。这是我的代码，我可以知道出了什么问题吗？

我的.ts文件

getApiData(){

  this.http.get('https://kairavforex.com/api/libor_rate/',{},{'Content-Type': 'application/json','Authorization': "Token" + " " +  this.authToken})

    .then(data=>{

      this.getData=JSON.parse(data.data).results;      

    })

  this.repeatInterval();

}

repeatInterval(){

   this.rateTimer=setInterval(() => { 

     this.getApiData(); 

  }, 20000);   

}

Answer 1

您可以尝试使用 RxJS和（或根据您的要求）运算符来连续轮询端点，而不是依赖setInterval()or函数。尝试以下setTimeout()repeatdelaytakeUntiltakeWhile一些服务stopPolling$ = new Subject();getApiData(): Observable<any> {&nbsp; return this.http.get(&nbsp; &nbsp; 'https://kairavforex.com/api/libor_rate/',&nbsp; &nbsp; {},&nbsp; &nbsp; {'Content-Type': 'application/json','Authorization': "Token" + " " +&nbsp; this.authToken}&nbsp; ).pipe(&nbsp; &nbsp; tap(data => this.getData = JSON.parse(data.data).results),&nbsp; &nbsp; delay(20000),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// <-- poll frequency&nbsp; &nbsp; repeat(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// <-- poll till `stopPolling$` emits&nbsp; &nbsp; takeUntil(stopPolling$)&nbsp; &nbsp; &nbsp;// <-- emit `stopPolling$` to stop polling&nbsp; );}stopPollingApi() {&nbsp; this.stopPolling$.next();&nbsp; this.stopPolling$.complete();}一些组件ngOnInit() {&nbsp; this.someService.getApiData().subscribe(&nbsp; &nbsp; // <-- will start polling&nbsp; &nbsp; res => { },&nbsp; &nbsp; err => { }&nbsp; );}someOtherFunc() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// <-- call this function to stop polling&nbsp; if(someCondition) {&nbsp; &nbsp; this.someService.stopPollingApi();&nbsp; }}

Answer 2

我通过在开始新间隔之前清除 SetInterval 解决了这个问题，以避免间隔重复。getApiData(){&nbsp; &nbsp; this.http.get('https://kairavforex.com/api/libor_rate/',{},{'Content-Type': 'application/json','Authorization': "Token" + " " +&nbsp; this.authToken})&nbsp; &nbsp; &nbsp; .then(data=>{&nbsp; &nbsp; &nbsp; &nbsp;this.getData=JSON.parse(data.data).results;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; this.repeatInterval();&nbsp; }&nbsp;&nbsp;&nbsp; repeatInterval(){&nbsp; &nbsp; clearInterval(this.rateTimer);&nbsp; &nbsp; this.rateTimer=setInterval(() => {&nbsp;&nbsp; &nbsp; &nbsp; this.getApiData();&nbsp;&nbsp; &nbsp;}, 20000);&nbsp;&nbsp; }

Answer 3

在repeatInterval 中调用getApiData 并将repeatInterval 设为IIFEgetApiData(){&nbsp; &nbsp; this.http.get('https://kairavforex.com/api/libor_rate/',{},{'Content-Type': 'application/json','Authorization': "Token" + " " +&nbsp; this.authToken})&nbsp; &nbsp; &nbsp; .then(data=>{&nbsp; &nbsp; &nbsp; &nbsp;this.getData=JSON.parse(data.data).results;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; })&nbsp; }(repeatInterval(){&nbsp; &nbsp; &nbsp;this.rateTimer=setInterval(() => {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;this.getApiData();&nbsp;&nbsp; &nbsp; }, 20000);&nbsp; &nbsp;&nbsp; })();