필요에 따라 몇 가지 옵션이 있습니다. 요청별로 오류를 처리하려면 요청에를 추가 catch하십시오. 글로벌 솔루션을 추가하려면 HttpInterceptor.
열고 여기에 작업 데모 plunker 아래의 솔루션을.
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-Getting Error Details .
따라서 일반적인 .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...그가 실제로 그것을 소비하는 서비스의 어딘가에 있어야 합니다. 왜냐하면 그가 Observable 흐름을 구축하고 가장 잘 처리 할 수있는 곳이기 때문입니다.