Angular中HttpError发生时如何返回空数组？

我正在和某个API交互，当API未查询到结果时会返回HttpError。比如向/api/fruits/xxxx发送GET请求时，API返回如下内容：

ERROR HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: 'Not Found', url: 'https://limitless-wave-57443.herokuapp.com/https://fruityvice.com/api/fruit/aaa', ok: false, …}

我需要在这种场景下返回空数组，用来给前端展示“未找到结果”的提示。我尝试用HttpError拦截器，但不知道怎么实现返回空数组的逻辑，以下是我的拦截器代码：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request)
      .pipe(
        retry(0),
        catchError((error: HttpErrorResponse) => {
          let errorMessage = '';
          if (error.error instanceof ErrorEvent) {
            // 客户端错误
            errorMessage = `Error: ${error.error.message}`;
          } else {
            // 服务端错误
            errorMessage = `Error Status: ${error.status}\nMessage: ${error.message}`;
          }
          console.log(errorMessage);
          return throwError(errorMessage);
        })
      )
  }

要实现特定错误场景下返回空数组的逻辑，你可以在catchError中判断错误状态码，当是404时返回包含空数组的Observable，其他错误则继续抛出错误。修改后的拦截器代码如下：

import { of } from 'rxjs';

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request)
      .pipe(
        retry(0),
        catchError((error: HttpErrorResponse) => {
          let errorMessage = '';
          if (error.error instanceof ErrorEvent) {
            // 客户端错误
            errorMessage = `Error: ${error.error.message}`;
          } else {
            // 服务端错误
            errorMessage = `Error Status: ${error.status}\nMessage: ${error.message}`;
          }
          console.log(errorMessage);
          
          // 判断是否是目标API的无结果404错误
          if (error.status === 404 && request.url.includes('/api/fruit')) {
            // 返回包含空数组的Observable
            return of([] as HttpEvent<any>);
          }
          
          // 其他错误继续抛出
          return throwError(() => new Error(errorMessage));
        })
      )
  }

关键修改说明 #

• 导入rxjs的of操作符，用于创建包含空数组的Observable。
• 增加条件判断：当错误状态码为404，且请求URL匹配水果查询接口时，返回空数组。你可以根据实际接口路径调整URL的判断逻辑，确保只在目标API的无结果场景下返回空数组。
• 非目标场景的错误保持原有逻辑，抛出错误信息。

修改后，当API返回404时，前端订阅请求的Observable会收到空数组，即可据此展示“未找到结果”的提示。

内容的提问来源于stack exchange，提问作者Armando_pagano