如何在 Angular 8 中定期调用异步方法？

Question

I'm calling an API which runs in for loop, but we want to wait for 1-2 seconds before hitting the API everytime inside the loop, so we made the method as async and added await before hitting the apiMethod.

But I also want to call the async method after every 5 minutes, so I added the interval method just before closing the async method. But it behaves weirdly, sometimes it waits for 5 min before invoking the method again, sometimes it calls it multiple times, and sometimes before 5 min is over. Any help?

async fetchData(){

for(let index=0;index<rollNo[].length; index++){ 

 await new Promise(r => setTimeout(r, 2000)); //delay of 2 sec before passing the next rollNo

//calls the service
  let  subscription = callAPIMethod(rollNo[index]).subscribe((data) => {
  this.Response = data;
  
  subscription.unsubscribe();

}, (error) => {
  this.showToasterMessage('', 'We encountered an error', 'error');
  return;
}); 
}


 //Wait for 5 min before starting all over again
 interval(300000).subscribe(x => {
      this.fetchData();
    });

}

I did try .pipe(delay(2000)) before making the method async but all it does is wait for 2 seconds and then run the entire for-loop at once which I don't want. Interval or setTimeOut works only when the method is not async, but if I don't make the method as async then I can't wait for 2 seconds before hitting the API everytime.

Answer 1

Sure you can get it using another approach and the timer rxjs/operator. An observable like

obs=timer(0,1000).pipe(
      take(this.rollNo[].length),
      switchMap(_=>{
      return callAPIMethod()
    }))

If you enclosed in another timer and use tap

timer(0,30000).pipe(switchMap(_=>{
  return this.obs.pipe(tap((res)=>{
      this.Response=res;
  }))
})).subscribe()

you get it

Updated I made a "fool example" in this stackblitz . You can see how the observable "callAPIMethod" is called so many times as elements has the array "values" each seconds, after 10 seconds start again (really as the "values" has 4 elements, after 7 seconds aprox)

Update 2 you has a code like

//this NOT WORK, callAPIMethod return null
//in general, when we work with observables only makes actions in subscribe or in tap 
//in the main "subscription" -in the example I use tap because I want to 
//execute actions in a "inner observable"
callAPIMethod(code) {
    let subscription = this.appService
      .slotByPin(code, this.date)
      .subscribe(data => {
        this.response = data;
        this.someOperationInsideThisMethod();
        subscription.unsubscribe();
      });
  }

But you should transform, your callAPIMethod should return an Observable, so transform the code by

this.obs = timer(0, 1000).pipe(
  take(this.parameters.length),
  switchMap(index => {
    //see that index is the result of "timer", that's 0,1,2,3...
    //so we can send to the callAPIMethod parameters[index]
    return this.callAPIMethod(parameters[index]);  
  })
);
timer(0, 10000)
      .pipe(
        switchMap(_ => {
          return this.obs.pipe(
            tap(
              data => {
        //see that you put here the code you had in your "callAPIMethod"
        this.response = data;
        this.someOperationInsideThisMethod();
            })
          );
        })
      )
      .subscribe();
  
  //see how the "callAPIMethod" return an observable
  callAPIMethod(code) {
    return this.appService
      .slotByPin(code, this.date)
      
  }

Answer 2

Solved with this

selectedCodes: string[] = [];

 ngOnInit() {
this.delayedLoop(this.selectedCodes.length, 0);


setInterval(() => {
  this.initializeSearch();
  this.delayedLoop(this.selectedCodes.length, 0);
}, ((5000+this.selectedCodes.length)*1000));


  delayedLoop(i:any,pIndex:any) {
    let arrLength =  i;
    let tempIndex = pIndex;
    if(this.selectedCodes && pIndex <  this.selectedCodes.length){
      let myThis = this;
      setTimeout(function() {
        myThis.fetchSlots(tempIndex,this.dateArrray);  
       
        if (--arrLength) {
          tempIndex++;
          myThis.delayedLoop(arrLength,tempIndex);
        }  
      }, 1000)
    }
  }