实际处理来自服务器的 Angular HTTP 404 错误,它表示没有记录的有效响应
Handling Angular HTTP 404 error from server actually which represents a valid response with no records
我遇到的情况是,我使用的 Web 服务编码不一致,我无法更改它们的行为。我的主要问题是,在后端数据库中没有与查询条件对应的记录的情况下,Web 服务 return 在有效 GET
方法上出现 HTTP 404
错误。正确的行为应该是 200
带有空元素数组(例如公司列表)的 HTTP 响应。
我有一个 Angular interceptor
和一个 catchError
函数,我已经编码以识别 404 确实不是错误的情况。在这个逻辑中,我想抑制错误和 return 包含 body: {companies: []}
.
的 response
有办法吗?
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
public intercept(request: { clone: (arg0: { headers: any; }) => any; headers: { set: (arg0: string, arg1: string) => any; }; }, next: { handle: (arg0: any) => any; }) {
...
return next.handle(request.clone({headers})).pipe(
// retry(1),
catchError((error: HttpErrorResponse) => {
let message;
if (error.error instanceof ErrorEvent) {
message = `Client error: ${error.error.message}`;
}
else {
message = `Server code: ${error.status}\nMessage: ${error.message}`;
// detect 404 error that aren't really errors
if (404 === error.status && [Webservices.GET_MEMBER_COMPANIES, Webservices.GET_MEMBER_PERSONS, Webservices.GET_MEMBER_PERSON_COMPANY_LINKS, Webservices.GET_MEMBER_VISUALIZATION_STATES].some((path: string) => {
return (new RegExp(path.replace(Webservices.MEMBER_ID, '\d+').replace(Webservices.COMPANY_ID, '\d+').replace(Webservices.PERSON_ID, '\d+').replace(Webservices.VISUALIZATION_STATE_ID, '\d+'))).test(error.url);
})) {
console.debug(error);
}
}
console.debug(headers);
console.debug(message);
// window.alert(message);
return throwError(message);
})
);
}
}
注意:以上是正在进行的工作,仅用于说明错误处理程序的状态
谢谢!
在您的 catchError 中,您需要 return 一个 Observable<HttpResponse>
。试试这个:
import {of} from 'rxjs'; //Add this
catchError((error: HttpErrorResponse) => {
if (404 === error.status){
var response = new HttpResponse({
body: {companies: []} //your body object
});
return of(response);
}
return throwError(message);
}
说明:如果您查看拦截器签名 (HttpEvent) intercept(req:HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
,return 类型是 Observable<HttpEvent<any>>
,这是一个 Angular 类型,定义为:
type HttpEvent<T> = HttpSentEvent | HttpHeaderResponse | HttpResponse<T> | HttpProgressEvent | HttpUserEvent<T>;
因此构建您的 HttpResponse 变量并使用运算符将其 return 作为 Observable。
就这些了。
我遇到的情况是,我使用的 Web 服务编码不一致,我无法更改它们的行为。我的主要问题是,在后端数据库中没有与查询条件对应的记录的情况下,Web 服务 return 在有效 GET
方法上出现 HTTP 404
错误。正确的行为应该是 200
带有空元素数组(例如公司列表)的 HTTP 响应。
我有一个 Angular interceptor
和一个 catchError
函数,我已经编码以识别 404 确实不是错误的情况。在这个逻辑中,我想抑制错误和 return 包含 body: {companies: []}
.
response
有办法吗?
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
public intercept(request: { clone: (arg0: { headers: any; }) => any; headers: { set: (arg0: string, arg1: string) => any; }; }, next: { handle: (arg0: any) => any; }) {
...
return next.handle(request.clone({headers})).pipe(
// retry(1),
catchError((error: HttpErrorResponse) => {
let message;
if (error.error instanceof ErrorEvent) {
message = `Client error: ${error.error.message}`;
}
else {
message = `Server code: ${error.status}\nMessage: ${error.message}`;
// detect 404 error that aren't really errors
if (404 === error.status && [Webservices.GET_MEMBER_COMPANIES, Webservices.GET_MEMBER_PERSONS, Webservices.GET_MEMBER_PERSON_COMPANY_LINKS, Webservices.GET_MEMBER_VISUALIZATION_STATES].some((path: string) => {
return (new RegExp(path.replace(Webservices.MEMBER_ID, '\d+').replace(Webservices.COMPANY_ID, '\d+').replace(Webservices.PERSON_ID, '\d+').replace(Webservices.VISUALIZATION_STATE_ID, '\d+'))).test(error.url);
})) {
console.debug(error);
}
}
console.debug(headers);
console.debug(message);
// window.alert(message);
return throwError(message);
})
);
}
}
注意:以上是正在进行的工作,仅用于说明错误处理程序的状态
谢谢!
在您的 catchError 中,您需要 return 一个 Observable<HttpResponse>
。试试这个:
import {of} from 'rxjs'; //Add this
catchError((error: HttpErrorResponse) => {
if (404 === error.status){
var response = new HttpResponse({
body: {companies: []} //your body object
});
return of(response);
}
return throwError(message);
}
说明:如果您查看拦截器签名 (HttpEvent) intercept(req:HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
,return 类型是 Observable<HttpEvent<any>>
,这是一个 Angular 类型,定义为:
type HttpEvent<T> = HttpSentEvent | HttpHeaderResponse | HttpResponse<T> | HttpProgressEvent | HttpUserEvent<T>;
因此构建您的 HttpResponse 变量并使用运算符将其 return 作为 Observable。
就这些了。