У вас есть несколько вариантов, в зависимости от ваших потребностей. Если вы хотите обрабатывать ошибки для каждого запроса, добавьте catch в свой запрос. Если вы хотите добавить глобальное решение, используйте HttpInterceptor.
Откройте здесь рабочий демонстрационный плункер, чтобы найти решения, указанные ниже.
tl;dr
В простейшем случае вам просто нужно добавить .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 {}
Примечание. Если у вас есть и перехватчик ошибок, и некоторая локальная обработка ошибок, естественно, вероятно, что локальная обработка ошибок никогда не будет запущена, поскольку ошибка всегда будет обрабатывается перехватчиком до, когда он достигает локальной обработки ошибок.
Запустите здесь рабочий демонстрационный плункер.
person
acdcjunior
schedule
03.09.2017
