实际处理来自服务器的 Angular HTTP 404 错误，这表示没有记录的有效响应

Question

我遇到的情况是，我使用的 Web 服务编码不一致，我无法更改它们的行为。我的主要问题是，如果后端数据库中没有与查询条件相对应的记录，则 Web 服务会在有效的 GET 方法上返回 HTTP 404 错误。正确的行为应该是带有空元素数组（例如公司列表）的200 HTTP 响应。

我有一个 Angular interceptor 和一个 catchError 函数，我已经编写了代码来识别 404 确实不是错误的情况。在这个逻辑中，我想抑制错误并返回一个包含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);
            })
        );
    }
}

注意：以上是正在进行的工作，仅用于说明错误处理程序的状态

谢谢！

Answer 1

在您的 catchError 中，您需要返回一个 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>>，则返回类型为 Observable<HttpEvent<any>>，这是一个定义为 Angular 的类型：

type HttpEvent<T> = HttpSentEvent | HttpHeaderResponse | HttpResponse<T> | HttpProgressEvent | HttpUserEvent<T>;

因此，构建您的 HttpResponse 变量并使用运算符将​​其作为 Observable 返回。

就是这样。