javascript - 单击 Angular 2 模式弹出窗口上的重试按钮再次调用失败的 Web API，如果调用在 'Retry' 上成功则继续执行

Question

在我的 Angular 2 应用程序中，我正在从组件调用服务以及从服务调用后端 Web API。从 Web API 获得的响应从服务发送回组件，我正在订阅组件内部的响应。对于错误处理，我使用了一个在整个应用程序中使用的通用错误组件。此错误组件用作其他组件内的模态弹出窗口。如果发生错误，此模式会弹出一个“重试”按钮。目前，单击“重试”按钮会再次重新加载整个页面。但是当用户单击“重试”按钮时，我想再次进行失败的 Web API 调用而不重新加载整个页面。如果此调用在重试时成功，则正常的执行流程应该继续而不会出现任何中断。我可能不得不对 angular 2 和 promises 使用 http 请求拦截器，但我不知道如何实现它们。你能帮我找到解决方案吗？

来 self 的 component.ts 文件的调用:

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

_accountdetailsS​​ervice 是该服务的一个实例。

从我的 service.ts 文件到后端 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();
                    }
                });

 }

component.ts 文件中的错误处理:

callErrorPage(error: any) {
    this.error = error;
    this.showErrorModal();
}

onRetry() {
    this.hideErrorModal();
    window.location.reload();
}

showErrorModal(): void {
    this.errorModal.show();
}

hideErrorModal(): void {
    this.errorModal.hide();
}

在所有其他组件上的模态内部使用的常见错误组件如下所示:

错误.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

我不确定我的想法是否可行。我想试一试。

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