属性“responseType”的类型不兼容

Question

我无法在 Angular 5 中发出接受 text/plain 作为响应的 POST 请求。 Angular 正在调用一个期望 JSON 作为响应的方法，因此在尝试解析响应时出现响应时会引发错误。

我尝试使用参数 {responseType: 'text'} 调用方法，但 VS 代码将其显示为错误，并且在编译应用程序时我也在控制台中收到错误。

下面是 Angular 5 的 POST 请求代码，它期望响应为 text/plain。

this.http
.post<string>(this.loginUrl, this.user, {responseType: 'text'}) // error in this line
.subscribe(
    (data) => this.success(data),
    (error) => this.failure(error)
);

编译时控制台显示以下错误：

ERROR in src/app/login/login.component.ts(47,47): error TS2345: Argument of type '{ responseType: "text"; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'.
  Types of property 'responseType' are incompatible.
    Type '"text"' is not assignable to type '"json"'.

Answer 1

post 接受responseType:'text' 的版本不是通用的，因为结果类型已经明确（即string）

this.http
.post(this.loginUrl, this.user, {responseType: 'text'}) // no generic parameter
.subscribe(
    (data) => this.success(data), // data is string
    (error) => this.failure(error)
);

Answer 2

如果您不想删除 <string> 以保持您的响应是强类型的，这里有一种方法：

    const httpOptions = {
      headers: new HttpHeaders({
        'Accept': 'text/plain, */*',
        'Content-Type': 'application/json' // We send JSON
      }),
      responseType: 'text' as 'json'  // We accept plain text as response.
    };
    return this.http.post<string>(this.setBaseUrl, body, httpOptions);

根据您要接收的数据，将text 替换为valid responseType。

Answer 3

只需从您的请求中删除“string”即可。试试这个：

this.http.post(this.loginUrl, this.user, {responseType: 'text'}).subscribe(
    (data) => this.success(data),
    (error) => this.failure(error)
);

Answer 4

我今天自己也遇到了这个特殊问题。经过一番搜索并确定 responseType 选项 应该 存在后，我设法使其工作如下：

let requestOptions: Object = { 
    headers: new HttpHeaders().set('Authorization', 'Basic ' + credentials),
    responseType: 'text'
}    

return this.httpClient.get<any>(
                this.environment.tokenHost + this.environment.authenticationURL,
                requestOptions
            )
            .subscribe(result => {
                // do stuff
            });

与在“请求”本身中配置它相比，像这样设置responseType 使其工作。

问候。

Answer 5

this.http.post(this.loginUrl,this.user,{headers:
new HttpHeaders({'content-type':'application/json'}), responseType:'text'})
.subscribe((r)=>{console.log(r)})

编辑

这很奇怪，但是像下面的 sn-p 一样单独创建标题对象

let headerOptions = {
 headers: new HttpHeaders(
     {'content-type':'application/json'}),
       responseType:'text'
 }
this.http.post(this.loginUrl,this.user, headerOptions)
 .subscribe((r)=>{console.log(r)})

会在 VS 代码中抛出错误，所以想法是像上面那样通过内联 post 请求中的整个对象来解决编译错误。