Angular 14中POST请求旧代码报错，如何改用新版本写法？

错误原因与修复要点 #

1. Headers类型不匹配：旧Angular 2的Headers类已被废弃，新版本需使用@angular/common/http中的HttpHeaders，其类型符合当前HttpClient.post方法的参数要求。
2. 响应解析方式变更：新版本HttpClient默认自动解析JSON响应为JavaScript对象，无需调用res.json()方法。

修复后的完整代码 #

首先确保导入所需模块：

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

修改searchCall方法：

searchCall() {
  // 初始化请求头，使用新版本的HttpHeaders
  const headers = new HttpHeaders()
    .set('Content-Type', 'application/x-www-form-urlencoded');

  // 用HttpParams构建请求参数（替代手动拼接，更安全规范）
  const searchParams = new HttpParams()
    .set('query', this.searchQuery);

  // 发送POST请求，HttpClient自动解析JSON响应
  this.http.post('http://localhost:3000/search', searchParams.toString(), { headers })
    .subscribe((res: any) => {
      this.tweetsData = res.data.statuses;
    });
}

额外注意事项 #

• 需在你的Angular模块（如AppModule）中导入HttpClientModule，否则HttpClient无法正常使用：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule,
    // 其他模块...
  ]
})
export class AppModule { }

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