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

What is the best way to showcase the chosen information?

While utilizing Typescript, it is unable to identify changes made to a property by a

Turn off the button and add a CSS class to it when sending a message

What could be the reason behind the malfunction of nativescript-phone on Android during plugin build?

What steps should I follow to create a versatile table component?

Can you explain how to invoke a class with express().use function?

What is the best way to get both the id and name of a selected item in Angular?

Switch back and forth between two pages within the same tab on an Ionic 3 app depending on the user's login information

Icon appearing outside the button instead of inside

Ways to obtain the present value in Angular

Update Observable by assigning it a new value of transformed information using the async pipe and RXJS

Error in Mongoose Schema Configuration Detected in NestJS App

Mixing Jest and Cypress in a TypeScript environment can lead to Assertion and JestMatchers issues

Sending information from the AppComponent to another component that is loaded at a separate time

Ways to customize the appearance of Angular material elements one by one?

Error TS2532 in TypeScript indicates that there is a possibility that the object is undefined

Implementing Angular - Injecting a component dynamically into another component

What are the methods to determine the cause of ESLint's slow performance?

Using the --prod flag in Ionic 3 app on Android 7 results in the Keyboard not being displayed

Oops! It seems like there was an issue trying to access properties that are undefined while reading 'pipe' in Angular12