angular - 使用 Angular 7 处理 HTTPErrorResponse 的最佳方法
问题描述
所以后端Server在前端有错误请求时返回不同的状态码和HttpErrorResponse;我已经意识到管理这个问题的最佳方法是在 Ionic 4/Angular 7 设置中使用拦截器。
我已经尝试过几次拦截器,但遇到了不同的问题。我现在正在按照此链接中的步骤进行操作
我的服务定义如下:
saveLocationNew(request: AddLocationRequest, entityId:string, userId:string): Observable<AddLocationResponse> {
return this.httpClient.post<AddLocationResponse>(this.addLocationUrl, request , {headers:Constants.getHeaders(userId,entityId)})
}
使用拦截器现在是:
saveLocationNew(request: AddLocationRequest, entityId:string, userId:string): Observable<AddLocationResponse> {
return this.httpClient.post<AddLocationResponse>(this.addLocationUrl, request , {headers:Constants.getHeaders(userId,entityId)})
.pipe(
tap(_ => console.log('creating a new location')),
catchError(this.handleError('new Location',[]))
);
}
问题是我现有的服务返回 AddLocationResponse 类型的响应;但是如果出现错误,我该如何定义返回对象的类型,而 ionic serve 也会抛出这个错误:
ERROR in src/app/services/location.service.ts(42,11): error TS2322: Type 'Observable<any[] | AddLocationResponse>' is not assignable to type 'Observable<AddLocationResponse>'.
[ng] Type 'any[] | AddLocationResponse' is not assignable to type 'AddLocationResponse'.
[ng] Type 'any[]' is not assignable to type 'AddLocationResponse'.
[ng] Property 'name' is missing in type 'any[]'.
[ng] src/app/services/location.service.ts(74,49): error TS2339: Property 'message' does not exist on type 'T'.
知道什么是实现拦截器的最佳方法,这样组件(*.page.ts 文件)就不需要任何更改。
我的拦截器看起来像这样:
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const token = localStorage.getItem('token');
if (token) {
request = request.clone({
setHeaders: {
'Authorization': token
}
});
}
if (!request.headers.has('Content-Type')) {
request = request.clone({
setHeaders: {
'content-type': 'application/json'
}
});
}
request = request.clone({
headers: request.headers.set('Accept', 'application/json')
});
return next.handle(request).pipe(
map((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
console.log('event--->>>', event);
}
return event;
}),
catchError((error: HttpErrorResponse) => {
if (error.status === 401) {
if (error.error.success === false) {
this.presentToast('Login failed');
} else {
console.log(' route this to right place');
// this.router.navigate(['auth/login']);
}
}
if (error.status === 500) {
if (error.error.success === false) {
this.presentToast('Something went wrong, Please contact Administrator');
} else {
console.log(' route this to right place');
// this.router.navigate(['auth/login']);
}
}
//431
if (error.status === 431) {
if (error.error.success === false) {
this.presentToast('Something went wrong with the HttpRequest, Please contact Administrator');
} else {
console.log(' route this to right place');
// this.router.navigate(['auth/login']);
}
}
// add all the other error codes here
return throwError(error);
}));
}
我不确定还需要添加/修改什么,以便拦截 HttpErrorResponse。
解决方案
你可以像这样使用它
saveLocationNew(request: AddLocationRequest, entityId:string, userId:string): Observable<AddLocationResponse> {
return this.httpClient.post<AddLocationResponse>(this.addLocationUrl, request , {headers:Constants.getHeaders(userId,entityId)})
.pipe(
tap(_ => console.log('creating a new location')),
catchError(this.handleError<string>('stats')))
)
}
现在创建一个名为 handle error 的函数来处理所有这样的错误请求
private handleError<T>(operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
console.error(error);
console.log(`${operation} failed: ${error.message}`);
if(error.error.message == "Token is invalid!"){
localStorage.removeItem('token');
this.router.navigateByUrl('/login');
}
else{
return throwError(error)
}
return of(result as T);
};
}
如果您想在组件中处理该错误,则需要抛出该错误。希望这会帮助你。
推荐阅读
- angular - 我无法使用 D3 在 Angular 中创建折线图,“类型 [数字,数字] 上不存在属性‘日期’”
- c# - 如何保存和稍后检索从 OnEventActivityAsync 方法获取的数据
- java - 如何找到只匹配 JOIN 而不是 LEFT OUTER JOIN 和 INNER OUTER JOIN 的正则表达式
- haskell - 加入和返回是否相互相反?
- python - 如何使用 beautiful-soup 从网站中提取数据?
- sql - 在sql表的列中添加连字符
- php - 将 PHP 请求路由到 App Engine 中的子文件夹
- reactjs - Getting undefined while accessing Context values
- power-automate - 我的 MS-Flow 中的“添加动态内容”窗口在哪里?
- python-3.x - Python 和 Opencv:我无法连接到相机 ip Ezviz C6CN