आपकी जरूरतों के आधार पर आपके पास कुछ विकल्प हैं। यदि आप प्रति-अनुरोध के आधार पर त्रुटियों को संभालना चाहते हैं, तो catchअपने अनुरोध में एक जोड़ें । यदि आप एक वैश्विक समाधान जोड़ना चाहते हैं, तो उपयोग करें HttpInterceptor।
नीचे दिए गए समाधानों के लिए यहां कार्यरत डेमो प्लंकर खोलें ।
tl; डॉ
सबसे सरल मामले में, आपको बस एक .catch()या एक जोड़ने की आवश्यकता होगी .subscribe(), जैसे:
import 'rxjs/add/operator/catch'; // don't forget this, or you'll get a runtime error
this.httpClient
.get("data-url")
.catch((err: HttpErrorResponse) => {
// simple logging, but you can do a lot more, see below
console.error('An error occurred:', err.error);
});
// or
this.httpClient
.get("data-url")
.subscribe(
data => console.log('success', data),
error => console.log('oops', error)
);
लेकिन इसके बारे में अधिक विवरण हैं, नीचे देखें।
विधि (स्थानीय) समाधान: लॉग त्रुटि और वापसी वापसी प्रतिक्रिया
यदि आपको केवल एक ही स्थान पर त्रुटियों को संभालने की आवश्यकता है, तो आप catchपूरी तरह से विफल होने के बजाय एक डिफ़ॉल्ट मान (या खाली प्रतिक्रिया) का उपयोग और वापस कर सकते हैं । आपको .mapबस कास्ट करने की आवश्यकता नहीं है , आप एक सामान्य फ़ंक्शन का उपयोग कर सकते हैं। स्रोत: Angular.io - त्रुटि विवरण प्राप्त करना ।
तो, एक सामान्य .get()विधि, इस तरह होगी:
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from "@angular/common/http";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/empty';
import 'rxjs/add/operator/retry'; // don't forget the imports
@Injectable()
export class DataService {
baseUrl = 'http://localhost';
constructor(private httpClient: HttpClient) { }
// notice the <T>, making the method generic
get<T>(url, params): Observable<T> {
return this.httpClient
.get<T>(this.baseUrl + url, {params})
.retry(3) // optionally add the retry
.catch((err: HttpErrorResponse) => {
if (err.error instanceof Error) {
// A client-side or network error occurred. Handle it accordingly.
console.error('An error occurred:', err.error.message);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
console.error(`Backend returned code ${err.status}, body was: ${err.error}`);
}
// ...optionally return a default fallback value so app can continue (pick one)
// which could be a default value
// return Observable.of<any>({my: "default value..."});
// or simply an empty observable
return Observable.empty<T>();
});
}
}
त्रुटि को संभालने से आपको एप्लिकेशन तब भी जारी रखने की अनुमति मिलेगी जब URL पर सेवा खराब स्थिति में हो।
यह प्रति-अनुरोध समाधान ज्यादातर अच्छा है जब आप प्रत्येक विधि के लिए एक विशिष्ट डिफ़ॉल्ट प्रतिक्रिया लौटना चाहते हैं। लेकिन अगर आप केवल त्रुटि प्रदर्शित करने के बारे में परवाह करते हैं (या एक वैश्विक डिफ़ॉल्ट प्रतिक्रिया है), तो बेहतर उपाय यह है कि इंटरसेप्टर का उपयोग करें, जैसा कि नीचे वर्णित है।
यहां काम कर रहे डेमो प्लंकर चलाएं ।
उन्नत उपयोग: सभी अनुरोधों या प्रतिक्रियाओं को इंटरसेप्ट करना
एक बार फिर, Angular.io गाइड दिखाता है:
@angular/common/httpइंटरसेप्शन की एक प्रमुख विशेषता इंटरसेप्टर घोषित करने की क्षमता है, जो आपके आवेदन और बैकएंड के बीच में बैठती है। जब आपका आवेदन एक अनुरोध करता है, तो इंटरसेप्टर्स इसे सर्वर पर भेजने से पहले बदल देते हैं, और इंटरसेप्टर आपके आवेदन को देखने से पहले प्रतिक्रिया को अपने तरीके से बदल सकते हैं। यह प्रमाणीकरण से लेकर लॉगिंग तक सब कुछ के लिए उपयोगी है।
जो, निश्चित रूप से, त्रुटियों को बहुत ही सरल तरीके से संभालने के लिए इस्तेमाल किया जा सकता है ( डेमो प्लंकर यहां ):
import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse,
HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/empty';
import 'rxjs/add/operator/retry'; // don't forget the imports
@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(request)
.catch((err: HttpErrorResponse) => {
if (err.error instanceof Error) {
// A client-side or network error occurred. Handle it accordingly.
console.error('An error occurred:', err.error.message);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
console.error(`Backend returned code ${err.status}, body was: ${err.error}`);
}
// ...optionally return a default fallback value so app can continue (pick one)
// which could be a default value (which has to be a HttpResponse here)
// return Observable.of(new HttpResponse({body: [{name: "Default value..."}]}));
// or simply an empty observable
return Observable.empty<HttpEvent<any>>();
});
}
}
अपने इंटरसेप्टर प्रदान करना: बस HttpErrorInterceptorउपरोक्त घोषित करने से आपका ऐप इसका उपयोग नहीं कर सकता है। आपको इसे अपने ऐप मॉड्यूल में एक इंटरसेप्टर के रूप में प्रदान करके तार करना होगा , जो निम्नानुसार है:
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpErrorInterceptor } from './path/http-error.interceptor';
@NgModule({
...
providers: [{
provide: HTTP_INTERCEPTORS,
useClass: HttpErrorInterceptor,
multi: true,
}],
...
})
export class AppModule {}
नोट: यदि आपके पास दोनों एक त्रुटि इंटरसेप्टर और कुछ स्थानीय त्रुटि हैंडलिंग, स्वाभाविक रूप से, यह संभव है कि कोई स्थानीय त्रुटि हैंडलिंग कभी, ट्रिगर किया जाएगा के बाद से त्रुटि हमेशा इंटरसेप्टर द्वारा नियंत्रित किया जाएगा है इससे पहले कि यह स्थानीय त्रुटि हैंडलिंग तक पहुँचता है।
चलाएं यहां काम कर रहे डेमो प्लंकर।
return this.httpClient.get<type>(...):। और फिरcatch...उस सेवा से कहीं बाहर है जहां वह वास्तव में इसका उपभोग करता है क्योंकि यही वह जगह है जहां वह वेधशालाओं के प्रवाह का निर्माण करेगा और इसे सबसे अच्छे से संभाल सकता है।