Retry the failed web API call by clicking the Retry button on the modular popup menu in Angular 2 and continue execution if the call succeeds in Retry,

Question

In my angular 2 application, I am making a call from component to service and from service to Back End web interface. The response received from the web API is sent back from the service to the component, and I subscribe to the response inside the component. For error handling, I use the common error component that is used in the application. This error component is used as a modal popup window inside other components. If an error occurs, this modal pops up with a Retry button. Currently, clicking the Repeat button reloads the entire page again. But when the user clicks the Retry button, I want to make an unsuccessful web API call again without reloading the entire page. If this call can be repeated, then the normal flow of execution should continue without any interruptions. I may have to use an HTTP interceptor for angular 2 and promises, but I could not figure out how to implement them. Could you help me find a solution?

A call from my component.ts file:

this._accountdetailsService.getContacts(this.group.id) .subscribe( contacts => this.contacts = contacts, error => this.callErrorPage(error); ); 

_accountdetailsService is an instance of a service.

Calling from my service.ts file to the Back End web interface:

 getContacts(groupId: number): any { return this._http.get(this._serverName + 'api/CustomerGroups/' + groupId + '/contacts') .map(response => { if(response.status < 200 || response.status >= 300) { throw new Error('This request has failed' + response); } else { return response.json(); } }); } 

Error handling inside the component.ts file:

 callErrorPage(error: any) { this.error = error; this.showErrorModal(); } onRetry() { this.hideErrorModal(); window.location.reload(); } showErrorModal(): void { this.errorModal.show(); } hideErrorModal(): void { this.errorModal.hide(); } 

The common error component that is used inside the modal component for each other component is shown below:

error.component.ts

 export class ErrorDetails implements OnInit { @Input() error; @Output() onRetry = new EventEmitter(); private sub: any; errorStatustext: string; errorMessage: string; constructor(private _route: ActivatedRoute) { } ngOnInit() { if (this.error.status == 0 || this.error.status == 500) { this.errorStatustext = "Sorry! Could not connect to server." } else { this.errorStatustext = this.error.statusText; var responseBody = JSON.parse(this.error._body); if (responseBody) { this.errorMessage = responseBody.resultText; } } } onRetryClick() { this.onRetry.emit(); } 

Answer 1

I'm not sure my idea is practical. I want to try.

In your component.ts file:

 retryAction: any; callErrorPage(error: any, retryAction: any) { this.error = error; this.retryAction = retryAction; this.showErrorModal(); } onRetry() { this.hideErrorModal(); //window.location.reload(); this.retryAction(); } onGetCountacts() { let that = this; this._accountdetailsService.getContacts(this.group.id) .subscribe( contacts => this.contacts = contacts, error => this.callErrorPage(error, () => { that.onGetCountacts(); }); ); }