如何处理Angular中forloop内取消的请求？

Question

I have 5+ pages in my App. I have the following method on header component.

The aim is, I need to show the status in the header if the user clicks the particular button. If I make a minimal or slow navigation between pages below code works fine. But if I navigate pages very frequently, the request getting canceled, because in some other pages I am calling the different set of API's.

async geneStatus() {
    for (const x of Object.keys(this.gene)) {
    const operationId = this.gene[x]['name'];
    let operArr;
    try {
        operArr = await this.fetchEachStatus(name);
    } catch (err) {
        continue;
    }
    if (operArr[0] && operArr[0] === 'error') {
        continue;
    }
 // Doing my logics
}


fetchEachStatus(geneId): Promise<any[]> {
    return new Promise((resolve, reject) => {
    this.apiDataService.get(this.geneUrl+ '/' + geneId).subscribe(
        (res) => {
        setTimeout(() => {
            resolve(res);
        }, 500);
        }, err => {
        setTimeout(() => {
            resolve(['error']);
        }, 500);
        });
    });
}

Here the problem is if any one of the API gets cancelled the for loop is not iterating for the next elements. I need to iterate the loop if one API is get cancelled. How can I fix this issue? I am not sure where I am making the problem.

Answer 1

I see multiple issues. I think the conversion to observable to promise is not only unnecessary, but counter-productive. Using the observables directly would enable you to use RxJS functions and operators. We can use the forkJoin function to make multiple simultaneous requests and catchError operator to mitigate the effects of potential errors.

Try the following

import { forkJoin } from 'rxjs';
import { catchError } from 'rxjs/operators';

geneStatus() {
  forkJoin(Object.keys(this.gene).map(gene => this.fetchEachStatus(gene['name']))).subscribe(
    res => {
      // res[0] - `{ success: true | false, geneId: geneId }` from `this.apiDataService.get(this.geneUrl + '/' + this.gene[0]['name'])`
      // res[1] - `{ success: true | false, geneId: geneId }` from `this.apiDataService.get(this.geneUrl + '/' + this.gene[1]['name'])`
      ...

      const passedGeneIds = res.filter(item => item.success).map(item => item.geneId);
      // passedGeneIds = [`geneId`, `geneId`, ...] - list of passed gene IDs

      const failedGeneIds = res.filter(item => !item.success).map(item => item.geneId);
      // failedGeneIds = [`geneId`, `geneId`, ...] - list of failed gene IDs

      // some other logic
    },
    error => {
      // essentially will never be hit since all the errors return a response instead
    }
  );
}

fetchEachStatus(geneId): Observable<any> {
  return this.apiDataService.get(this.geneUrl + '/' + geneId).pipe(
    map(_ => ({ sucess: true, geneId: geneId })),                  // <-- map to return the `geneId`
    catchError(error => of({ sucess: false, geneId: geneId }))     // <-- retun an observble from `catchError`
  );
}

Now you need to remember that each time a button is clicked multiple simultaeneous requests are triggered. One solution to overcome this issue is to cancel all current requests before triggering a new set of request. For that you could bind the buttons to emit a central observable and trigger the requests using switchMap operator piped to that observable.