Angular中无法检测API返回404状态码的问题求助

你遇到的问题其实是Angular HTTP请求的一个常见误区：只有状态码为2xx的成功请求才会进入subscribe的第一个（成功）回调函数，像404这类错误状态码会直接触发第二个（错误）回调，所以你现在的代码根本不会走到if(res.status === 404)这个判断里。

下面是具体的修复方案，分两种场景给你演示：

1. 直接修改现有嵌套订阅的代码 #

先调整你原来的嵌套订阅逻辑，给getProfile的订阅加上错误回调，在错误回调里判断404状态：

import { HttpErrorResponse } from '@angular/common/http'; // 记得导入这个类型

ngOnInit(){ 
  this.auth.memberInfo() 
    .subscribe(
      res =>{ 
        const user = res.json(); // 如果用的是老版Http模块需要这一步，HttpClient则不需要
        this.user = user; 
        console.log('The User: ', user); 
        
        this.profileService.getProfile(user.id) 
          .subscribe(
            profileRes => { 
              // 这里只有2xx成功请求才会进入
              this.profile = profileRes.json(); // 同样，HttpClient直接用profileRes即可
              // 你的其他业务逻辑...
            },
            (error: HttpErrorResponse) => {
              // 错误回调：处理404等错误状态
              if(error.status === 404){ 
                this.navCtrl.push('CreateProfilePage'); 
              } else {
                // 处理其他错误，比如打印日志或提示用户
                console.error('获取用户资料失败:', error);
              }
            }
          ); 
      },
      (memberError) => {
        // 别忘了处理memberInfo请求本身的错误
        console.error('获取用户基础信息失败:', memberError);
      }
    );
}

如果你的项目用的是Angular 4.3+的HttpClient模块（现在大部分项目都是），可以简化res.json()的步骤，因为HttpClient会自动解析JSON响应：

ngOnInit(){ 
  this.auth.memberInfo() 
    .subscribe(
      user =>{ 
        this.user = user; 
        console.log('The User: ', user); 
        
        this.profileService.getProfile(user.id) 
          .subscribe(
            profile => { 
              this.profile = profile;
              // 你的其他业务逻辑...
            },
            (error: HttpErrorResponse) => {
              if(error.status === 404){ 
                this.navCtrl.push('CreateProfilePage'); 
              } else {
                console.error('获取用户资料失败:', error);
              }
            }
          ); 
      },
      (memberError) => {
        console.error('获取用户基础信息失败:', memberError);
      }
    );
}

2. 优化方案：用RxJS操作符避免嵌套订阅 #

嵌套订阅会让代码变得难以维护，推荐用RxJS的switchMap操作符来扁平化数据流，让代码更清晰：

import { switchMap } from 'rxjs/operators';
import { HttpErrorResponse } from '@angular/common/http';

ngOnInit(){ 
  this.auth.memberInfo() 
    .pipe(
      // 用switchMap将memberInfo的结果传递给getProfile请求
      switchMap(user => {
        this.user = user;
        console.log('The User: ', user);
        return this.profileService.getProfile(user.id);
      })
    )
    .subscribe(
      profile => {
        this.profile = profile;
        // 你的其他业务逻辑...
      },
      (error: HttpErrorResponse) => {
        if(error.status === 404){ 
          this.navCtrl.push('CreateProfilePage'); 
        } else {
          console.error('请求出错:', error);
        }
      }
    );
}

关键注意点 #

• 一定要在错误回调里处理404、500这类非2xx状态码的响应；
• 如果要精准判断错误类型，记得导入HttpErrorResponse并给error参数指定类型；
• 不要忘记处理上游请求（比如memberInfo）的错误，避免出现未捕获的异常。

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