एंगुलर 2 में एक मोडल पॉपअप पर पुनः प्रयास बटन पर क्लिक करने के लिए फिर से एक असफल वेब एपीआई कॉल करें और कॉल को 'पुनः प्रयास करें'

Question

पर सफल होने पर निष्पादन जारी रखें मेरे कोणीय 2 ऐप में, मैं घटक से सेवा और सेवा से कॉल कर रहा हूं बैक एंड वेब एपीआई के लिए। वेब एपीआई से प्राप्त प्रतिक्रिया को सेवा से वापस घटक में भेजा जाता है और मैं घटक के अंदर प्रतिक्रिया की सदस्यता ले रहा हूं। त्रुटि प्रबंधन के लिए, मैं एक सामान्य त्रुटि घटक का उपयोग कर रहा हूं जिसका उपयोग पूरे ऐप में किया जाता है। यह त्रुटि घटक अन्य घटकों के अंदर एक मॉडल पॉपअप के रूप में प्रयोग किया जाता है। यदि कोई त्रुटि उत्पन्न होती है, तो यह मोडल 'पुनः प्रयास करें' बटन के साथ पॉप अप करता है। वर्तमान में, 'पुनः प्रयास करें' बटन पर क्लिक करने से पूरे पृष्ठ को दोबारा लोड किया जाता है। लेकिन जब उपयोगकर्ता 'पुनः प्रयास' बटन पर क्लिक करता है, तो मैं पूरे पृष्ठ को पुनः लोड किए बिना विफल वेब एपीआई कॉल फिर से बनाना चाहता हूं। यदि यह कॉल पुनः प्रयास करने में सफल होता है, तो सामान्य निष्पादन प्रवाह किसी भी बाधा के बिना जारी रहना चाहिए। मुझे कोणीय 2 और वादे के लिए http अनुरोध इंटरसेप्टर का उपयोग करना पड़ सकता है लेकिन मुझे पता नहीं लगा कि उन्हें कैसे कार्यान्वित किया जाए। क्या आप समाधान ढूंढने में मेरी मदद कर सकते हैं?

मेरी component.ts फ़ाइल से कॉल:

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

_accountdetailsService सेवा का एक उदाहरण है।

मेरी service.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(); 
} 

सामान्य त्रुटि घटक है जो अंदर प्रयोग किया जाता है:

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 फाइल के अंदर से निपटने त्रुटि हर दूसरे घटक पर मोडल नीचे दिखाया गया है:

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

मुझे यकीन नहीं है कि मेरा विचार व्यावहारिक है या नहीं। मैं इसे आज़मा देना चाहता हूं।

अपने 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(); }); 
       ); 
}