Ponownie wykonaj nieudane wywołanie interfejsu API sieci Web, klikając przycisk Ponów próbę na modalnym wyskakującym okienku w trybie Angular 2 i kontynuuj wykonywanie, jeśli wywołanie powiedzie się w dniu "Ponów próbę wykonania"

Question

W mojej aplikacji kątowej 2 wykonuję połączenie od składnika do usługi i od usługi do internetowego interfejsu API zaplecza. Odpowiedź uzyskana z Web API jest odsyłana z usługi do komponentu i subskrybuję odpowiedź wewnątrz komponentu. W przypadku obsługi błędów używam wspólnego komponentu błędu, który jest używany w całej aplikacji. Ten składnik błędu jest używany jako modalne wyskakujące okienko w innych komponentach. Jeśli wystąpi błąd, ten modal wyskoczy z przyciskiem "Ponów". Obecnie kliknięcie przycisku "Ponów próbę" powoduje ponowne załadowanie całej strony. Ale gdy użytkownik kliknie przycisk "Ponów", chcę ponownie wykonać nieudane wywołanie interfejsu Web API bez ponownego ładowania całej strony. Jeśli to połączenie powiedzie się po ponowieniu, normalny przepływ wykonania powinien być kontynuowany bez żadnych przerw. Być może będę musiał użyć przechwytywacza żądań http dla kątowego 2 i obietnic, ale nie mogę wymyślić, jak je wdrożyć. Czy mógłbyś mi pomóc znaleźć rozwiązanie?

Rozmowa z moim pliku component.ts:

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

_accountdetailsService jest instancją usługi.

Rozmowa z moich service.ts złożyć do 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(); 
        } 
       }); 

} 

obsługi błędów w pliku 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(); 
} 

wspólnym składnikiem błędu, który jest używany wewnątrz Modal na każdym innym komponencie jest pokazany poniżej:

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

Nie jestem pewien, czy mój pomysł jest praktyczny. Chcę spróbować.

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