【问题标题】:Angular7: unable to set {responseType: 'text'}Angular7:无法设置 {responseType: 'text'}
【发布时间】:2019-05-06 17:22:32
【问题描述】:

场景: 在来自 Angular7 的 API 调用中,我正在调用 Node(通过 express)并返回字符串类型的分块数据 - 我想捕获此字符串数据并将其显示为字符串

服务器端: 从 Node 后端,发送的数据是 'text' 而不是 json...数据是通过多个 res.write('some strings') 语句发送的

Angular 中的客户端: 我想要一个 observable 来处理这些数据......

  1. 当我没有提到任何 responseType [return this.http.get(this.streamURL);]... 我得到错误:

SyntaxError: Unexpected token { in JSON at position 12 在 JSON.parse() 处

  1. 当我没有提到 responseType 为 'text [return this.http.get(this.streamURL , { responseType: 'text'});]... 我在编译时遇到错误:

src/app/myS.service.ts(24,54) 中的错误:错误 TS2322:类型“文本”是 不能分配给类型 '"json"'

如何从我的 Node JS 后端捕获“文本”数据...我在我的 Node 中使用 npm cors,所以那里没有 CORS 错误

演示代码在此处提供:https://stackblitz.com/edit/angular-44sess

我的后端在下面的sn-p中:

app.get('/obs/responseWrite', cors(), function(req, res){
  var j=0;
  
  const headers = { 
    'Content-Type': 'text',     
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'OPTIONS, POST, GET',
    'Access-Control-Max-Age': 2592000, // 30 days
  };
  res.writeHead(200,headers);
  
  for(var i=0; i<50000; i++){
    /* setInterval(function() {    res.write("returning j:["+ j + "]. "); j=j+1; if(j>=100){res.end();} }, 1000); */
    var myObj =  { return : i };
    var myStr= JSON.stringify(myObj);
    console.log(myStr);
    res.write(myStr);
  }
  setInterval(function() {    res.end(); }, 15000);
  
});

【问题讨论】:

  • 尝试一次return this.http.get(this.streamURL , { responseType: 'text'}); remove any。

标签: node.js angular angular7 chunked


【解决方案1】:

在这种情况下,我总是使用以下模式:

returnObservable(): Observable<any> {
  const requestOptions: Object = {
    /* other options here */
    responseType: 'text'
  }
  return this.http.get<any>(this.streamURL , requestOptions);
}

希望它能回答你的问题!

【讨论】:

  • 我将 responseType 设置如下,因为它正在工作。 return this.httpClient.get(${environment.baseApiUrl}/getResonseAsText, { params: queryParams, headers: headers, responseType: 'text' as 'json'});参考:github.com/angular/angular/issues/18586
  • @Ieremias Viorel 救生员!我用它来下载excel。而且效果很好。
【解决方案2】:

您不能使用返回泛型类型。在文档中,泛型类型仅适用于“json”。这意味着您需要像这样使用 get:

return this.http.get(this.streamURL, { responseType: "text"});

参见文档https://angular.io/api/common/http/HttpClient#get 您对 Overload #11 感兴趣,现在您正在使用 Overload #13

最后,这是您的代码更新链接:https://stackblitz.com/edit/angular-gv1tkl?file=src/app/myS.service.ts

编辑 1

我粘贴了错误的 stackblitz 链接。以上正确。

【讨论】:

  • 正如我在上面写的(第 2 点)...当我这样做时,我得到错误并且程序无法编译... [错误在 src/app/myS.service.ts( 24,54): 错误 TS2322: 类型 '"text"' 不可分配给类型 '"json"']
  • @AIqbalRaj 检查我在 stackblitz 中的示例。我添加了 wep-api,但我没有收到您提到的错误。
  • 我收到了错误并用它更新了问题 - 在我的本地角度,我也收到了“ng serve”错误
  • 这个问题清楚地说明了 Angular 7,这给出了“没有重载匹配这个调用”错误。上面接受的答案工作正常。
  • 谢谢!这应该是 IMO 接受的答案。
猜你喜欢
  • 2022-06-10
  • 2016-05-29
  • 2020-07-20
  • 2019-01-18
  • 2013-09-27
  • 1970-01-01
  • 2019-08-18
  • 2016-04-20
  • 1970-01-01
相关资源
最近更新 更多