Angular 4中HTTP POST请求回调的错误处理问题咨询

好问题！你遇到的情况是因为服务里的catchError把错误拦截处理后，返回了一个兜底的Observable（比如官方教程里的of(undefined)），这会让整个Observable流继续“正常”完成，导致组件的subscribe只会执行成功的next回调，完全感知不到错误发生。咱们可以通过以下两种方式来解决：

方案一：修改服务，让错误传递到组件 #

在服务的catchError中处理完错误日志后，重新抛出错误，这样组件就能捕获到错误并做出响应：

首先更新Hero服务的addHero方法：

// 记得导入throwError
import { throwError } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';

/** POST: add a new hero to the server */
addHero (hero: Hero): Observable<Hero> {
  return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe(
    tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),
    catchError(error => {
      // 先执行原有的错误处理逻辑
      this.handleError<Hero>('addHero')(error);
      // 重新抛出错误，让订阅的组件能捕获到
      return throwError(() => error);
    })
  );
}

然后修改组件的add方法，在subscribe中添加error回调，处理错误提示，同时只在成功时添加英雄到数组：

add(name: string): void {
  name = name.trim();
  if (!name) { return; }
  this.heroService.addHero({ name } as Hero)
    .subscribe({
      next: (hero) => { 
        // 只有请求成功时才添加英雄
        this.heroes.push(hero); 
      },
      error: (err) => { 
        // 这里弹出提示框，你可以根据项目需求用UI组件（比如Angular Material的SnackBar）或者原生alert
        if (err.status === 404) {
          alert('添加失败：服务器资源不存在');
        } else {
          alert(`添加失败：${err.message || '未知错误'}`);
        }
      }
    });
}

方案二：不修改服务，在组件中判断响应（不推荐） #

如果不想改动服务的错误逻辑，也可以在组件的next回调中判断返回的hero是否有效（因为服务的handleError会返回undefined），但这种方式不够直观，也无法精准判断错误类型：

add(name: string): void {
  name = name.trim();
  if (!name) { return; }
  this.heroService.addHero({ name } as Hero)
    .subscribe(hero => {
      if (hero) {
        this.heroes.push(hero);
      } else {
        alert('添加英雄失败，请稍后重试');
      }
    });
}

显然方案一更合理，它能让组件精准感知错误类型，做出更友好的提示，同时保证只有请求真正成功时才更新组件数据。

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