У вас есть несколько вариантов, в зависимости от ваших потребностей. Если вы хотите обрабатывать ошибки для каждого запроса, добавьте catchв свой запрос. Если вы хотите добавить глобальное решение, используйтеHttpInterceptor .
Откройте здесь рабочий демонстрационный плункер для решений ниже.
tl; dr
В простейшем случае вам просто нужно добавить a .catch()или a .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...место вне службы, где он фактически потребляет ее, потому что именно там он будет строить поток наблюдаемых объектов и может справиться с этим лучше всего.