[英]Http Error Handling in Angular 6
我正在尝试使用 angular 6 中的以下类来处理 http 错误。我从服务器获得了 401 unAuthorized 状态。 但是我看不到控制台错误消息。
HttpErrorsHandler.ts 文件
import { ErrorHandler, Injectable} from '@angular/core';
@Injectable()
export class HttpErrorsHandler implements ErrorHandler {
handleError(error: Error) {
// Do whatever you like with the error (send it to the server?)
// And log it to the console
console.error('It happens: ', error);
}
}
app.module.ts 文件
providers: [{provide: ErrorHandler, useClass: HttpErrorsHandler}],
调用文件
import { Injectable , Component} from '@angular/core';
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Observable } from 'rxjs';
import {AuthServiceJwt} from '../Common/sevice.auth.component';
@Injectable()
export class GenericHttpClientService {
private readonly baseUrl : string = "**********";
constructor(private httpClientModule: HttpClient , private authServiceJwt : AuthServiceJwt) {
}
public GenericHttpPost<T>(_postViewModel: T , destinationUrl : string): Observable<T> {
const headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8')
.set('Authorization',`Bearer ${this.authServiceJwt.getToken}`);
return this.httpClientModule.post<T>(this.baseUrl + destinationUrl, _postViewModel, { headers });
}
// This method is to post Data and Get Response Data in two different type
public GenericHttpPostAndResponse<T,TE>(postViewModel: TE, destinationUrl: string): Observable<T> {
const headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8')
.set('Authorization',`Bearer ${this.authServiceJwt.getToken}`);
return this.httpClientModule.post<T>(this.baseUrl + destinationUrl, postViewModel, { headers });
}
// This method is to post Data and Get Response Data in two different type without JWT Token
public GenericHttpPostWithOutToken<T,TE>(postViewModel: TE, destinationUrl: string): Observable<T> {
const headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8');
return this.httpClientModule.post<T>(this.baseUrl + destinationUrl, postViewModel, { headers });
}
public GenericHttpGet<T>(destinationUrl: string): Observable<T> {
const headers = new HttpHeaders().set('Content-Type', 'application/json')
.set('Authorization',`Bearer ${this.authServiceJwt.getToken}`);
return this.httpClientModule.get<T>(this.baseUrl + destinationUrl, { headers });
}
public GenericHttpDelete<T>(destinationUrl: string): Observable<T> {
const headers = new HttpHeaders().set('Content-Type', 'application/json')
.set('Authorization',`Bearer ${this.authServiceJwt.getToken}`);
return this.httpClientModule.delete<T>(this.baseUrl + destinationUrl, { headers });
}
}
admin.user.component.ts 文件
private getUsersHttpCall(): void {
this.spinnerProgress = true;
this.genericHttpService.GenericHttpGet<GenericResponseObject<UserViewModel[]>>(this.getAdminUserUrl).subscribe(data => {
if (data.isSuccess) {
this.genericResponseObject.data = data.data;
this.dataSource = this.genericResponseObject.data
this.spinnerProgress = false;
}
}, error => {
console.log(error);
this.spinnerProgress = false;
});
}
对于 XHR 请求,您应该使用Interceptor
这是我用来将 JWT 添加到标头并处理一些响应错误的方法:
import {Injectable} from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor, HttpErrorResponse
} from '@angular/common/http';
import {AuthService} from '../service/auth.service';
import {Observable, of} from 'rxjs';
import {Router} from "@angular/router";
import {catchError} from "rxjs/internal/operators";
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
constructor(public auth: AuthService, private router: Router) {
}
/**
* intercept all XHR request
* @param request
* @param next
* @returns {Observable<A>}
*/
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (localStorage.getItem('jwtToken')) {
request = request.clone({
setHeaders: {
Authorization: 'Bearer ' + localStorage.getItem('jwtToken')
}
});
}
/**
* continues request execution
*/
return next.handle(request).pipe(catchError((error, caught) => {
//intercept the respons error and displace it to the console
console.log(error);
this.handleAuthError(error);
return of(error);
}) as any);
}
/**
* manage errors
* @param err
* @returns {any}
*/
private handleAuthError(err: HttpErrorResponse): Observable<any> {
//handle your auth error or rethrow
if (err.status === 401) {
//navigate /delete cookies or whatever
console.log('handled error ' + err.status);
this.router.navigate([`/login`]);
// if you've caught / handled the error, you don't want to rethrow it unless you also want downstream consumers to have to handle it as well.
return of(err.message);
}
throw err;
}
}
不要忘记将拦截器注册到app.module.ts
如下所示:
import { TokenInterceptor } from './auth/token.interceptor';
@NgModule({
declarations: [],
imports: [],
exports: [],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true,
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
从@firegloves 的回答来看,为了让各个服务中的.pipe
处理程序实际上能够catchError
它们自己的 HTTP 故障代码,您需要将代码结构catchError
:
of(error)
,这可能会在任何后续.pipe
正常处理。throw
它,以便后续的错误处理程序(例如您的服务中的错误处理程序)可以为自己的调用挑选并处理非 401 错误。我的拦截器有双重工作。 它:
Authorization
标头注入所有传出请求。/login
。import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import {
HttpErrorResponse,
HttpEvent,
HttpHandler,
HttpInterceptor,
HttpRequest,
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';
import { AuthService } from './auth.service';
@Injectable({
providedIn: 'root',
})
export class RequestInterceptor implements HttpInterceptor {
constructor(
private readonly auth: AuthService,
private readonly router: Router,
) {
}
/**
* @param HttpRequest<any> request - The intercepted request
* @param HttpHandler next - The next interceptor in the pipeline
* @return Observable<HttpEvent<any>>
*/
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
request = this.addToken(request);
return next.handle(request)
// add error handling
.pipe(
catchError(
(error: any, caught: Observable<HttpEvent<any>>) => {
if (error.status === 401) {
this.handleAuthError();
// if you've caught / handled the error, you don't
// want to rethrow it unless you also want
// downstream consumers to have to handle it as
// well.
return of(error);
}
throw error;
}
),
);
}
/**
* Handle API authentication errors.
*/
private handleAuthError() {
// clear stored credentials; they're invalid
this.auth.credentials = null;
// navigate back to the login page
this.router.navigate(['/login']);
}
/**
* Add stored auth token to request headers.
* @param HttpRequest<any> request - the intercepted request
* @return HttpRequest<any> - the modified request
*/
private addToken(request: HttpRequest<any>): HttpRequest<any> {
const token: string = this.auth.token;
if (token) {
return request.clone({
setHeaders: {
Authorization: `Bearer ${token}`,
},
});
}
return request;
}
}
AuthService
所做的只是有一个公共 get/set 将凭证对象AuthService
到localStorage
- 它确保令牌未过期,但您可以根据需要设计它。
像上面提到的@firegloves 一样,您必须将拦截器添加到app.module.ts
的管道中:
import { RequestInterceptor } from './auth/request.interceptor';
@NgModule({
declarations: [],
imports: [],
exports: [],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: RequestInterceptor,
multi: true,
},
],
bootstrap: [AppComponent],
})
export class AppModule { }
角度 7 中的示例错误处理
public getstats(param: string, confgId: number, startDate: Date, endDate: Date): Observable<string> {
return this.http.post(this.stats, {
param: param,
endDate: endDate
}).pipe(tap((stats: string) => console.log('Got Exceedance Stats : ' + JSON.stringify(stats))),
catchError(this.handleError<string>('stats')));
}
下面是错误处理程序
private handleError<T>(operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
console.error(error);
console.log(`${operation} failed: ${error.message}`);
return of(result as T);
};
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.