আপনার প্রয়োজনের উপর নির্ভর করে আপনার কাছে কিছু বিকল্প রয়েছে। আপনি যদি প্রতি অনুরোধের ভিত্তিতে ত্রুটিগুলি পরিচালনা করতে চান তবে 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>();
});
}
}
ত্রুটিটি পরিচালনা করা আপনাকে ইউআরএল-এ থাকা পরিষেবাটি খারাপ অবস্থায় থাকলেও অ্যাপটি চালিয়ে যাওয়ার অনুমতি দেবে।
প্রতি-অনুরোধ সমাধানটি বেশিরভাগ ক্ষেত্রেই ভাল যখন আপনি প্রতিটি পদ্ধতির একটি নির্দিষ্ট ডিফল্ট প্রতিক্রিয়া ফিরিয়ে দিতে চান। তবে আপনি যদি কেবল ত্রুটি প্রদর্শনের বিষয়ে চিন্তা করেন (বা বিশ্বব্যাপী ডিফল্ট প্রতিক্রিয়া রয়েছে), তবে নীচের বর্ণিত হিসাবে একটি ইন্টারসেপ্টর ব্যবহার করা আরও ভাল সমাধান।
এখানে ওয়ার্কিং ডেমো প্লাঙ্কার চালান ।
উন্নত ব্যবহার: সমস্ত অনুরোধ বা প্রতিক্রিয়াগুলিতে বাধা দেওয়া
আবার, 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...সেখান থেকে অন্য কোথাও আসবে যেখানে তিনি এটি সত্যই গ্রাস করেন কারণ সেখানে তিনি পর্যবেক্ষণযোগ্য প্রবাহ তৈরি করবেন এবং এটি সর্বোত্তমভাবে পরিচালনা করতে পারবেন।