Angular POST请求设置observe为response报错如何解决？

报错核心是类型不匹配：当你给HttpClient请求配置observe: "response"时，请求返回的不再是直接的响应体数据，而是包含状态码、响应头、响应体的完整HttpResponse对象，你当前方法声明的返回值类型和实际返回类型不符，所以触发了TS报错。

1. 首先导入缺失的HttpResponse类型

import { HttpClient, HttpHeaders, HttpResponse } from "@angular/common/http";

2. 修正方法的返回值类型，将原来的Observable<UsersPageResponse[]>改为Observable<HttpResponse<UsersPageResponse[]>>
3. 为了避免Typescript将observe: "response"推导为通用string类型导致类型不兼容，可以给options添加as const类型断言，固定observe的字面量类型。

import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders, HttpResponse } from "@angular/common/http";
import { Observable } from "rxjs";

// 其他业务代码省略

getPage(pageRequest: UsersPageRequest): Observable<HttpResponse<UsersPageResponse[]>> {
    let headers = new HttpHeaders({
        'Content-Type': 'application/json',
        'ApiKey': 'something', 
        'UserToken': this.localStorageService.getUserToken()
    })
    let options = { 
        headers: headers, 
        observe: "response" as const
    };
    return this.http.post<UsersPageResponse[]>(this.baseUrl + 'users/page', pageRequest, options);
}

你调用这个方法的时候，就可以从返回的HttpResponse对象中获取需要的状态码和响应数据：

this.userService.getPage(pageReq).subscribe(response => {
  // 获取响应状态码
  const status = response.status;
  // 获取响应体数据
  const data = response.body;
  // 后续根据状态码处理对应逻辑
})

如果你之前配置了错误拦截器，需要确认拦截器中没有修改响应的类型结构，拦截器的处理逻辑要保留HttpResponse的完整结构，不要直接返回响应体内容，否则会破坏observe: "response"的返回结构。

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