Angular请求返回200状态码时无法获取响应体ErrorMsg错误信息如何解决

问题根因 #

后端OTP校验失败时返回的是HTTP 200状态码，Angular HttpClient默认只会将非2xx状态码的响应判定为错误，因此你写的catchError、handleError逻辑完全不会触发这个场景的错误处理。你需要自己根据响应体的业务状态字段IsSuccess判断是否业务失败，再提取对应的ErrorMsg。
你之前打印响应只能拿到Result里的字段，是因为没有提前做业务状态判断，只要后端返回的结构和你定义的RootObject一致，就能完整拿到所有字段。

解决方案1：组件层直接判断业务状态（改动最小） #

1. 先修改登录服务的loginForm方法，只有业务成功时才保存用户信息：

//POST API for Login
loginForm(data: any): Observable<RootObject> {
  return this.http
    .post<RootObject>(`${environment.baseUrl}/VerifyMobileOTP`, data, this.httpOptions)
    .pipe(
      tap((resp: RootObject) => {
        // 只有业务成功才存储用户信息、跳转页面
        if (resp.IsSuccess) {
          this.setUser(resp.Result as Result)
        }
      }),
      catchError(this.handleError)
    );
}

2. 修改登录组件的订阅逻辑，在成功回调里先判断业务状态：

login() {
  this.loading = true;
  var number = this.loginForm.value[Object.keys(this.loginForm.value)[0]]
  this.otp = this.otpForm.value[Object.keys(this.otpForm.value)[0]]
  console.log(number, this.otp);
  var loggedin = { "MobileNumber": number, "OTP": this.otp }
  // call login api
  this.authService.loginForm(loggedin).subscribe(response => {
    console.log(response); // 此处可拿到完整RootObject，包含ErrorMsg、IsSuccess
    this.loading = false;
    // 业务失败直接取错误信息
    if (!response.IsSuccess) {
      this.errorLogin = response.ErrorMsg;
      console.log(this.errorLogin);
      return;
    }
    // 业务成功的后续逻辑
  }, error => {
    this.loading = false;
    this.status = error;
    console.log(error) // 此处仅处理非2xx的HTTP错误
  });
}

解决方案2：服务层主动抛出业务错误，统一走错误处理逻辑 #

1. 修改登录服务的loginForm方法，业务失败时主动抛出错误：

//POST API for Login
loginForm(data: any): Observable<RootObject> {
  return this.http
    .post<RootObject>(`${environment.baseUrl}/VerifyMobileOTP`, data, this.httpOptions)
    .pipe(
      tap((resp: RootObject) => {
        // 业务失败主动抛出错误，携带后端返回的ErrorMsg
        if (!resp.IsSuccess) {
          throw new Error(resp.ErrorMsg)
        }
        this.setUser(resp.Result as Result)
      }),
      catchError(this.handleError)
    );
}

2. 修改handleError方法，透传真实错误信息，不要返回固定提示：

// Handle errors
handleError(error: HttpErrorResponse | Error) {
  let errorMsg = '发生未知错误，请稍后重试';
  if (error instanceof Error) {
    // 业务主动抛出的错误，直接取错误信息
    errorMsg = error.message
  } else if (error.error instanceof ErrorEvent) {
    // 客户端侧网络/运行错误
    console.error('客户端发生错误:', error.error.message);
    errorMsg = error.error.message
  } else {
    // 后端返回非2xx状态码的错误
    console.error(
      `后端返回状态码 ${error.status}, ` +
      `响应体为: ${JSON.stringify(error.error)}`);
    // 如果非2xx响应也有ErrorMsg，可直接提取
    errorMsg = error.error?.ErrorMsg || errorMsg
  }
  return throwError(() => new Error(errorMsg));
}

3. 组件的错误回调直接获取透传的错误信息即可：

login() {
  // 前面逻辑不变
  this.authService.loginForm(loggedin).subscribe(response => {
    console.log(response);
    this.loading = false;
    // 此处只有业务成功才会进入，不需要再判断状态
  }, error => {
    this.loading = false;
    this.status = error.message; // 此处就是后端返回的ErrorMsg
    console.log(error.message)
  });
}

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