Make a failed Web API call again on clicking Retry button on a modal popup in Angular 2 and continue execution if the call succeeds on 'Retry'

Question

In my angular 2 app, I am making a call from component to service and from service to the back end Web API. The response obtained from Web API is sent back from service to the component and I am subscribing to the response inside the component. For error handling, I am using a common error component which is used across the app. This error component is used as a modal popup inside other components. If an error occurs, this modal pops up with a 'Retry' button. Currently, clicking on the 'Retry' button reloads the entire page again. But when the user clicks the 'Retry' button, I want to make the failed Web API call again without reloading the entire page. If this call succeeds on retry, then normal execution flow should continue without any interruptions. I might have to use http request interceptor for angular 2 and promises but I couldn't figure out how to implement them. Could you please help me find the solution?

The 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 the service.

The call from my service.ts file to back end Web API:

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 which is used inside the modal on every 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 am not sure if my idea is practical. I want to give it a try.

In your component.ts:

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(); });
                  );
}