İhtiyaçlarınıza bağlı olarak bazı seçenekleriniz var. Hataları istek bazında ele almak istiyorsanız, isteğinize bir ekleyin catch. Global bir çözüm eklemek istiyorsanız, kullanın HttpInterceptor.
Aşağıdaki çözümler için burada çalışan demo plunker'ı açın .
tl; dr
En basit durumda, sadece a .catch()veya a eklemeniz gerekir .subscribe(), örneğin:
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)
);
Ancak bununla ilgili daha fazla ayrıntı var, aşağıya bakın.
Yöntem (yerel) çözüm: günlük hatası ve geri dönüş yanıtı
Hataları yalnızca bir yerde işlemeniz gerekiyorsa, catchtamamen başarısız olmak yerine varsayılan bir değer (veya boş yanıt) kullanabilir ve döndürebilirsiniz. Ayrıca, .mapsadece yayınlamak için ihtiyacınız yok , genel bir işlev kullanabilirsiniz. Kaynak: Angular.io - Hata Ayrıntılarını Alma .
Dolayısıyla, genel bir .get()yöntem şöyle olacaktır:
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>();
});
}
}
Hatayı ele almak, URL'deki hizmet kötü durumda olsa bile uygulamanıza devam etmenize olanak tanır.
Bu istek başına çözüm, çoğunlukla her yönteme belirli bir varsayılan yanıt döndürmek istediğinizde iyidir. Ancak, yalnızca hata görüntülemeyi önemsiyorsanız (veya genel bir varsayılan yanıtınız varsa), daha iyi çözüm aşağıda açıklandığı gibi bir durdurucu kullanmaktır.
Çalışan demo plunker'ı buradan çalıştırın .
Gelişmiş kullanım: Tüm istekleri veya yanıtları yakalamak
Angular.io kılavuzu bir kez daha şunu gösterir:
Başlıca bir özelliği, @angular/common/httpuygulamanız ile arka uç arasında bulunan engelleyicileri bildirme yeteneği olan müdahaledir. Uygulamanız bir talepte bulunduğunda, müdahaleciler bunu sunucuya göndermeden önce dönüştürür ve önleyiciler, uygulamanız görmeden önce yanıtı geri dönüş yolunda dönüştürebilir. Bu, kimlik doğrulamadan günlüğe kaydetmeye kadar her şey için yararlıdır.
Elbette ki, hataları çok basit bir şekilde ele almak için kullanılabilir ( burada demo plunker ):
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>>();
});
}
}
Önleyicinizi sağlama:HttpErrorInterceptor Yukarıdakileri beyan etmeniz, uygulamanızın onu kullanmasına neden olmaz. Bunu , aşağıdaki gibi bir müdahale aracı olarak sağlayarak uygulama modülünüzde bağlamanız gerekir:
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 {}
Not: Eğer varsa hem bir hata önleme ve bazı yerel hata işleme doğal olarak, bu hata hep dinleyici ile ele alınacaktır beri hiçbir yerel hata işleme hiç tetiklenebilir olasıdır önce yerel hata işleme ulaşır.
Çalışan demo plunker'ı buradan çalıştırın .
return this.httpClient.get<type>(...). ve sonracatch...hizmetin dışında gerçekten tükettiği bir yere sahip olun, çünkü burada gözlemlenebilir akış oluşturacağı ve en iyi şekilde başa çıkabileceği yer.