Angular 2中HTTP响应处理问题：无法提取响应状态与消息

看起来你遇到两个核心问题：一是请求方法不匹配导致405错误，二是服务层只返回了状态码，没保留响应体里的详细信息，所以组件拿不到完整的响应数据。我来一步步帮你解决：

1. 先修正请求方法（解决405错误） #

从你提供的响应信息里明确写了Request method 'POST' not supported，说明后端API要求用PUT请求，但你现在用的是http.post，这是导致405错误的直接原因。先把服务里的请求方法改成PUT：

2. 修改服务层，返回完整的响应信息 #

你原来的map操作只返回了success.status，相当于把响应体里的所有数据都丢弃了，所以组件只能拿到状态码。我们要修改服务，返回包含状态码、响应体消息的完整对象：

import { Observable } from 'rxjs/Observable';
// 确保导入必要的模块：Headers, RequestOptions, Response等

updateAccountData(/* 你的参数 */) {
  let headers = new Headers({ 'Content-Type': 'application/json' });
  let options = new RequestOptions({ headers: headers });
  
  // 把post改成put，匹配后端API要求
  return this.http.put(
    `http://192.168.16.89:${this.globalData.port1}/api.spacestudy.com/spacestudy/${this.globalData.institutename}/admin/account/saveattributes`,
    this.account,
    options
  )
  .map((success: Response) => {
    // 解析响应体的JSON数据，返回包含状态码和消息的对象
    const responseBody = success.json();
    return {
      statusCode: success.status,
      message: responseBody.message,
      fullBody: responseBody
    };
  })
  .catch(this.handleError);
}

private handleError(error: Response | any) {
  let errorDetails: any;
  if (error instanceof Response) {
    // 解析错误响应体，拿到后端返回的错误消息
    errorDetails = error.json() || { message: error.statusText };
    errorDetails.statusCode = error.status;
  } else {
    errorDetails = { message: error.message || error.toString(), statusCode: 500 };
  }
  console.error('请求出错:', errorDetails);
  return Observable.throw(errorDetails);
}

3. 组件层订阅时获取完整数据 #

现在组件订阅时能拿到包含状态码和消息的对象，不仅能判断状态，还能显示后端返回的自定义提示：

// 先在组件里定义两个变量，用来存状态码和消息
statusCode: number;
responseMessage: string;

// 调用服务的代码
this.accountDetailService.updateAccountData(
  this.nAccountId,
  this.nDeptId,
  this.sLocation,
  this.nAccountCPCMappingid,
  this.nInvestigatorId,
  this.sAcctDesc,
  this.sClientAcctId
)
.subscribe(
  successRes => {
    this.statusCode = successRes.statusCode;
    this.responseMessage = successRes.message;
    console.log("成功状态码:", this.statusCode);
    console.log("成功消息:", this.responseMessage);
  },
  errorRes => {
    this.statusCode = errorRes.statusCode;
    this.responseMessage = errorRes.message;
    console.log("错误状态码:", this.statusCode);
    console.log("错误消息:", this.responseMessage);
  }
);

4. 优化HTML模板，显示动态消息 #

原来的模板是硬编码提示，现在可以直接用后端返回的消息，更灵活：

<div *ngIf="statusCode" >
  <div *ngIf="statusCode === 200" class="successResponse success">
    {{ responseMessage || 'Account Updated successfully.' }}
  </div>
  <div *ngIf="statusCode >= 400" class="errorResponse error">
    {{ responseMessage || '请求出错，请稍后重试。' }}
  </div>
</div>

关键说明 #

• 之前拿不到响应数据，是因为你在map里只返回了状态码，把响应体的其他信息都丢掉了，现在我们把完整的响应内容都返回给组件。
• 405错误是请求方法不匹配导致的，改成PUT后这个错误应该会消失（只要后端API的PUT接口配置正确）。
• 错误处理里也解析了响应体，这样即使请求失败，也能拿到后端返回的具体错误原因，而不是只看到状态码。

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