为什么在Angular 10中发送携带JSON参数的GET请求时出现类型错误

错误原因 #

• 参数配置语法错误：你在配置GET请求的params对象时，直接把JSON.stringify(dataPlan)作为对象成员，没有指定参数键名，不符合Angular HttpClient要求的键值对格式，也不满足TS的类型校验规则。
• 方法重载匹配错误：Angular的HttpClient.get有多个重载定义，当传入的options参数不符合返回泛型对象的重载要求时，TS会自动匹配到其他重载（比如返回ArrayBuffer的版本），因此就出现了返回值类型不匹配的报错。

修复方案 #

给序列化后的参数指定后端对应的接收键名即可，示例代码如下：

getData(dataPlan: Data): Observable<Response<InfoType[]>> {
  return this.client.get<Response<InfoType[]>>(environment.baseUrl + '/ctrl/getDataPlan', {
    params: {
      // 此处data替换为你的后端实际接收的参数字段名
      data: JSON.stringify(dataPlan)
    }
  });
}

如果参数结构更复杂，也可以使用HttpParams规范构建参数：

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

// ...
getData(dataPlan: Data): Observable<Response<InfoType[]>> {
  const params = new HttpParams().set('data', JSON.stringify(dataPlan));
  return this.client.get<Response<InfoType[]>>(environment.baseUrl + '/ctrl/getDataPlan', { params });
}

补充说明：请确认你代码中声明的Response是自定义的带results属性的接口，不要和浏览器原生的Response类型重名，避免出现其他类型冲突问题。

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