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

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

来自my component.ts文件的调用：

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

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

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

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

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

_accountdetailsService是该服务的一个实例

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

 }

每个其他组件在模态内部使用的常见错误组件如下所示：

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

---

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

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

---

我将其添加到所有API调用中并对其进行了测试。它正在工作。非常感谢您提供的解决方案。：）np，听到这个消息我很高兴。