angular - 500个服务器错误的角度句柄
问题描述
如何修改我的 http 调用来处理(捕获)500 个服务器错误。我尝试调用 API,但在函数的“错误”部分收到“500(内部服务器错误”。如果可能的话,我希望能够捕获它,但不知道如何。有没有简单的方法来做到这一点?
call_http() {
this.http.get<any>('/api/goes/here').subscribe(data => {
this.result = data;
},
err => {
console.log(err);
});
}
我没有使用任何标题、地图、错误处理程序等。这只是一个基本调用。
解决方案
如果您想在使用HttpClient
service 进行后端调用时拦截错误,并且在每次调用中不重复自己,则需要使用拦截器。
这是我们在应用程序中使用的内容,具体取决于错误类型:500、400、404、403,我们重定向、显示支付模式或仅显示 toast 消息:
Http状态错误代码:
export class HttpError{
static BadRequest = 400;
static Unauthorized = 401;
static Forbidden = 403;
static NotFound = 404;
static TimeOut = 408;
static Conflict = 409;
static InternalServerError = 500;
}
拦截器代码:
import {Injectable, Injector} from '@angular/core';
import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http'
import {Observable} from 'rxjs/Observable';
import {AuthorizationService} from "../authorization.service/authorization.service";
import {HttpError} from "./http-error";
import {Router} from "@angular/router";
import {Toaster} from "nw-style-guide/toasts";
@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
// Regular dep. injection doesn't work in HttpInterceptor due to a framework issue (as of angular@5.2.9),
// use Injector directly (don't forget to add @Injectable() decorator to class).
constructor(private _injector: Injector) {}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const logFormat = 'background: maroon; color: white';
return next.handle(req)
.do(event => {
}, exception => {
if (exception instanceof HttpErrorResponse) {
switch (exception.status) {
case HttpError.BadRequest:
console.error('%c Bad Request 400', logFormat);
break;
case HttpError.Unauthorized:
console.error('%c Unauthorized 401', logFormat);
window.location.href = '/login' + window.location.hash;
break;
case HttpError.NotFound:
//show error toast message
console.error('%c Not Found 404', logFormat);
const _toaster = this._injector.get(Toaster),
_router = this._injector.get(Router);
_toaster.show({
message: exception.error && exception.error.message ? exception.error.message :
exception.statusText,
typeId: 'error',
isDismissable: true
});
_router.navigate(['']);
break;
case HttpError.TimeOut:
// Handled in AnalyticsExceptionHandler
console.error('%c TimeOut 408', logFormat);
break;
case HttpError.Forbidden:
console.error('%c Forbidden 403', logFormat);
const _authService = this._injector.get(AuthorizationService);
_authService.showForbiddenModal();
break;
case HttpError.InternalServerError:
console.error('%c big bad 500', logFormat);
break;
}
}
});
}
}
您还需要将拦截器添加到您引导应用程序的@NgModule 提供程序中:
{
provide: HTTP_INTERCEPTORS,
useClass: ErrorInterceptor,
multi: true
},
根据您的需要修改代码 - 开始时 - 我们只是将内容记录到控制台。一旦你有了这个拦截器,它将处理通过 HttpClient 服务的所有后端请求。
推荐阅读
- java - 交换单个字母单词的大小写
- javascript - 刷新 Angular 中的特定组件
- python - 使用不同数量的占位符格式化字符串 python
- javascript - 如何修复功能已在 Jasmine 中发现错误
- jenkins - 詹金斯致命:org.jenkinsci.plugins.tokenmacro.MacroEvaluationException:无法识别的宏
- sql-server - 使用 case 语句修复除以零错误
- xml - 从 XML 合并特定节点并在 XSLT 中添加属性
- php - 如何从 URI 路径参数中获取关联数组?
- c# - 第二次显示表单时如何摆脱 System.ObjectDisposedException?
- asp.net-mvc - 在 Editor Template 中,Kendo Combobox DataSource 没有命中 Controller 方法来填充组合框