Thực hiện lại cuộc gọi API Web không thành công khi nhấp vào nút Thử lại trên cửa sổ bật lên phương thức trong Góc 2 và tiếp tục thực hiện nếu cuộc gọi thành công trên 'Thử lại'

Question

Trong ứng dụng góc 2 của tôi, tôi thực hiện cuộc gọi từ thành phần đến dịch vụ và từ dịch vụ vào API Web cuối. Phản hồi thu được từ Web API được gửi trở lại từ dịch vụ đến thành phần và tôi đang đăng ký trả lời bên trong thành phần. Để xử lý lỗi, tôi đang sử dụng một thành phần lỗi phổ biến được sử dụng trên ứng dụng. Thành phần lỗi này được sử dụng như một cửa sổ bật lên phương thức bên trong các thành phần khác. Nếu xảy ra lỗi, phương thức này sẽ bật lên bằng nút 'Thử lại'. Hiện tại, việc nhấp vào nút 'Thử lại' sẽ tải lại toàn bộ trang một lần nữa. Nhưng khi người dùng nhấp vào nút 'Thử lại', tôi muốn thực hiện lại cuộc gọi API Web không thành công mà không cần tải lại toàn bộ trang. Nếu cuộc gọi này thành công khi thử lại thì luồng thực thi thông thường sẽ tiếp tục mà không bị gián đoạn. Tôi có thể phải sử dụng http yêu cầu đánh chặn cho góc 2 và hứa hẹn nhưng tôi không thể tìm ra cách để thực hiện chúng. Bạn có thể vui lòng giúp tôi tìm giải pháp không?

Cuộc gọi từ file component.ts tôi:

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

_accountdetailsService là một thể hiện của các dịch vụ.

Cuộc gọi từ service.ts tôi nộp để sao lưu cuối API Web:

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

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

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

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

Thành phần lỗi phổ biến được sử dụng bên trong: xử lý bên trong component.ts tập tin

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

} 

Lỗi phương thức trên mọi thành phần khác được hiển thị bên dưới:

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

Tôi không chắc liệu ý tưởng của mình có thực tiễn hay không. Tôi muốn thử.

Trong component.ts của bạn:

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