Parent observable method encountering an error while grouping multiple HTTP calls in Angular

Question

Parent observable method encountering an error while grouping multiple HTTP calls in Angular

I am facing an issue with managing multiple http calls and handling errors that may occur during their execution. I want to be able to identify which calls have failed so that I can retry them using a different method. However, without visibility at the component level, it becomes challenging for me to determine which specific call needs to be retried.

// COMPONENT CALL

generateDocuments(documentType: DocumentType, validDocuments: DocumentTemplate): observable<any>{
return this.documentService.generateDocuments(clientId, ClientDescription, documentType, validDocuments)}

//SERVICE CALL:

generateDocuments(clientId: int, ClientDescription, documentType:DocumentType, validDocuments: DocumentTemplate): observable<any>{

switch(documentType){

documentType.Word:{
return this.getDocumentCall(clientId, ClientDescription, ...)}

documentType.Excel:{
return this.getDocumentCall(clientId, ClientDescription, ...)}
}

// This line will throw an error/success one by one depending on when the call complete

 private getDocumentCall(clientId: int, clientDescription: string, ....)
    {
    
    return forkjoin([1,2,4,4,5].map((documentId:number) => {
    
    this.http.get('uri'+documentId+'/'+clientId,headers..).pipe( catchError(error => {
                return of(error);
              });
    });

I am looking for a way to track successful or failed calls at the component level, or find a method to bubble up all errors/responses to the component level for better management.

Thank you

angular typescript rxjs observable fork-join

Answer 1

Answer №1

Explore the forkJoin function here. Consider passing in an object with key-value pairs for better identification in your case.

As it is currently set up, the order will remain the same for each subscription (resulting in [1, 2, 3, 4, 5] every time).

Your catchError method handles errors from API calls and returns a successful error object to subscribers.

To start off, you can try something like this:

this.service.getDocumentCall(1, 'hello').subscribe(responses => {
  responses.forEach(response => {
     if (response instanceof HttpErrorResponse) {
        console.log('This call failed');
     } else {
        console.log('This call succeeded');
     }
  });
});

Edit:

You may want to consider implementing something along these lines:

private getDocumentCall(clientId: int, clientDescription: string, ....)
    {
      const calls = {};
      const ids = [1, 2, 3, 4, 5];
      
      ids.forEach(id => {
         calls[id] = this.http.get('uri' + id + '/' + clientId, headers...).pipe( catchError(error => {
                return of(error);
              });
      });
      return forkJoin(calls);
    });

this.getDocumentCall(1, '2').subscribe(response => {
  for (const key in response) {
    if (response[key] instanceof HttpErrorResponse) {
      console.log(`Call with id: ${key} failed`);
    } else {
      console.log(`Call with id: ${key} succeeded`);
    }
  }
});

Answer 2

Explore the forkJoin function here. Consider passing in an object with key-value pairs for better identification in your case.

As it is currently set up, the order will remain the same for each subscription (resulting in [1, 2, 3, 4, 5] every time).

Your catchError method handles errors from API calls and returns a successful error object to subscribers.

To start off, you can try something like this:

this.service.getDocumentCall(1, 'hello').subscribe(responses => {
  responses.forEach(response => {
     if (response instanceof HttpErrorResponse) {
        console.log('This call failed');
     } else {
        console.log('This call succeeded');
     }
  });
});

Edit:

You may want to consider implementing something along these lines:

private getDocumentCall(clientId: int, clientDescription: string, ....)
    {
      const calls = {};
      const ids = [1, 2, 3, 4, 5];
      
      ids.forEach(id => {
         calls[id] = this.http.get('uri' + id + '/' + clientId, headers...).pipe( catchError(error => {
                return of(error);
              });
      });
      return forkJoin(calls);
    });

this.getDocumentCall(1, '2').subscribe(response => {
  for (const key in response) {
    if (response[key] instanceof HttpErrorResponse) {
      console.log(`Call with id: ${key} failed`);
    } else {
      console.log(`Call with id: ${key} succeeded`);
    }
  }
});

Parent observable method encountering an error while grouping multiple HTTP calls in Angular

Answer №1

Similar questions

The PrimeNG table fails to refresh upon initial modification

Is there a way for me to convert my (TypeScript Definition) .d.ts file into a (JavaScript) .js file?

Error: Unable to access the 'filter' property as it is undefined. TypeError occurred

It is possible that the object may be null, as indicated by TS2531 error

When using the RxJs Pipe with MAP in Angular and Ionic, it may not return a value in windows, but it works perfectly in Mac when used with HttpClient

How can you dynamically disable a radio option button using Angular rendering without relying on an ID?

Angular 4 with Universal: Implementing 404 Status Code in Header for /404 Page Component

The RxJS race function comes to a standstill if neither stream completes

Discover the potential of JavaScript's match object and unleash its power through

Is there a TypeScript rule called "no-function-constructor-with-string-args" that needs an example?

Error: Protractor encountered an unexpected token while trying to import an external class

The external typing file encounters an issue when trying to locate the relative path to its own index.d.ts file

Configuring Angular for Seamless Integration with a Backend API in Kubernetes Environment

Break down a data structure into a type that includes multiple options

Can you explain the distinction between rxjs/observable and the traditional jQuery AJAX approach?

Exploring Angular 2 Paper-Input for Effective Form Management

What is the best method for installing the most recent 1.1.5 version of is-callable?

Bidirectional Binding of Angular HTML Fields in Quill Editor

Retrieving child elements from parent identifiers using Typescript

Issue with Object.keys printing in an abnormal manner