Angular中HttpInterceptor返回的错误信息为何被忽略？

问题原因分析 #

你的代码存在两处关键问题，导致组件的错误订阅无法触发：

1. 组件订阅的语法错误 #

你在调用subscribe时，错误回调的括号位置不正确，导致错误回调没有被正确关联到订阅对象上。原代码把错误回调写在了subscribe()的外部括号之后，这相当于只执行了subscribe的第一个参数（成功回调），错误回调根本没有被传入订阅方法。

2. Interceptor中错误处理的不规范写法 #

catchError操作符要求回调函数返回一个Observable对象，直接throw response虽然Angular会做兜底处理，但这种写法不符合RxJS的规范，可能导致错误流无法正确传递到下游订阅。

另外，你的服务代码中存在两处类型语法错误，虽不直接影响错误订阅，但需修正以保证代码合法性：

• Observable<data2: number> 应为 Observable<{data2: number}>
• http.post<{data2: number;&gt; 应为 http.post<{data2: number}>

修正后的代码示例 #

1. 修正HttpInterceptor的错误处理 #

import { throwError } from 'rxjs';

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(catchError(error => this.errorHandler(error)));
}

private errorHandler(response: HttpEvent<any>): Observable<HttpEvent<any>> {
  console.log(response);
  // 使用throwError返回错误Observable，保证错误流正确传递
  return throwError(() => response);
}

2. 修正服务中的类型错误 #

getData(data1: string): Observable<{data2: number}> {   
  return this.http.post<{data2: number}>('search/', {data1});  
}

3. 修正组件中的订阅语法 #

this.someService.getData('hi').subscribe(
  res => {    
    console.log('res wont response because error its find and expected');
  },
  err => {
    console.log('hello?');
    console.log(err);
  }
);

或者使用更清晰的对象形式订阅：

this.someService.getData('hi').subscribe({
  next: res => {    
    console.log('res wont response because error its find and expected');
  },
  error: err => {
    console.log('hello?');
    console.log(err);
  }
});

关键说明 #

• 组件订阅时，必须将错误回调作为subscribe方法的第二个参数传入，或者使用包含error属性的配置对象，才能正确捕获错误流。
• 在catchError中返回throwError是RxJS处理错误流的标准方式，能确保错误被传递到下游的订阅错误回调中。

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