angular - 如何在本地处理错误并跳过 Angular HTTP 拦截器？

Question

我有一个 Angular HttpInterceptor 来捕获错误并根据状态代码显示适当但通用的错误消息。

我有一个特定的情况，我实际上期望和错误消息(UI 试图释放对刚刚删除的资源的锁定，所以我得到 404)。

在那种情况下，我想直接在进行 API 调用时处理错误，并跳过拦截器。

我试过这个:

releaseReviewerLock(itemType: EquipmentItemType, itemId: EquipmentItem["id"]): Observable<void> {
  return this.http
    .post<void>(`${this.configUrl}/${itemType.toLowerCase()}/${itemId}/release-reviewer-lock/`, {})
    .pipe(
      catchError(e => {
        if (e.status === HttpStatusCode.NotFound) {
          // We can ignore the 404 because the item has just been deleted, so there's nothing to release.
          return EMPTY;
        }
      })
    );
}

但不仅是我的 intercepto 无论如何被调用，上面的 catchError block 根本没有执行(断点没有停止)。

我能否在不修改拦截器并保持类似单一职责的情况下实现我想要的？

谢谢!

Answer 1

我们可以通过some metadata context到 HttpClient，然后在 HttpInterceptor 中检索它。

当然，这意味着在 HttpInterceptor 中添加一些逻辑，但是由于元数据上下文，此代码可以更加通用，并且保持简单。

例如:

在 api.service.ts 中:

this.httpClient
  .get('http://...', {
    context: new HttpContext().set(IGNORED_STATUSES, [404]),
  })
  .pipe(
    catchError((e) => {
      console.log('Error catched locally', e);
      return of(EMPTY);
    })
  )
  .subscribe();

在 error.interceptor.ts 中:

export const IGNORED_STATUSES = new HttpContextToken<number[]>(() => []);

export class CustomHttpInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const ignoredStatuses = req.context.get(IGNORED_STATUSES);

    return next.handle(req).pipe(
      catchError((e: HttpErrorResponse) => {

        // if ignored statuses are set
        // and returned status matched 
        if (ignoredStatuses?.includes(e.status)) {
          // rethrow error to be catched locally
          return throwError(() => e);
        }

        // process error...
        console.log('error interceptor !!', e);
        return of();
      })
    );
  }
}