Angular添加observe:'response'报pipe未定义错误 如何获取响应头

这个错误和{ observe: 'response' }配置本身没有关系，是代码逻辑存在两个明显问题：

• 异步时序问题：answer2初始值为undefined，Angular的HTTP请求是异步执行的，代码执行到answer2.pipe()时，subscribe回调里给answer2赋值的逻辑还没触发，此时answer2还是undefined，自然无法读取pipe属性。
• 调用对象错误：就算subscribe回调执行完成，answer2被赋值为value.body——这只是普通的接口返回数据对象，本身不存在pipe方法，pipe是RxJS Observable实例的方法。你之前不加observe配置能正常运行，本质是直接对http.post()返回的Observable对象调用pipe，而非对普通返回数据调用pipe。

直接对http.post()返回的Observable调用pipe，在map操作符中处理完整响应对象即可，不需要额外提前subscribe赋值变量，代码如下：

// 注意提前引入类型：import { HttpResponse } from '@angular/common/http';
return this.http.post<ResponseLoginHttp>(
  AUTH_API + "login",
  json_data,
  { observe: 'response' } // 配置返回完整响应对象
).pipe(
  map((fullResponse: HttpResponse<ResponseLoginHttp>) => {
    // 1. 读取响应体，和原有逻辑一致
    const responseBody = fullResponse.body;
    // 2. 读取需要的响应头，例如获取鉴权token、自定义业务头
    const targetHeaderValue = fullResponse.headers.get('your-target-header-key');
    // 执行原有存储逻辑
    this.dataService.setResponceLoginHttp(responseBody);
    // 按业务需求返回值即可，需要返回响应体就返回body，需要返回完整响应也可直接返回fullResponse
    return responseBody;
  }),
  catchError((error) => {
    console.log("Error - ", error);
    throw new Error(error.message);
  })
);

• 跨域场景下如果要读取自定义响应头，需要后端配置Access-Control-Expose-Headers响应头，把需要前端读取的头字段加入暴露列表，否则前端无法拿到对应头的值。
• 不要在封装HTTP方法的内部随意提前subscribe：HttpClient返回的是冷流，只有subscribe时才会真正发起请求，正确做法是返回拼装完操作符的Observable，由最终调用方触发订阅即可。

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