web-dev-qa-db-ja.com

Angular7：{responseType： 'text'}を設定できません

シナリオ：Angular7からのAPI呼び出し時に、Node（エクスプレス経由）を呼び出し、タイプのチャンクデータを返しますstring-この文字列データをキャプチャして文字列として表示したい

サーバー側：Nodeバックエンドから、送信されるデータは 'text'であり、jsonではありません...データは複数のres.write（ 'some string'）ステートメントを介して送信されます

Angularのクライアント側：オブザーバブルでこのデータを処理したい...

  1. responseTypeについて言及しないと[returnthis.http.get（this.streamURL）;] ...エラーが発生します：

SyntaxError：JSON.parse（）の位置12にあるJSONの予期しないトークン{

the error on stackBlitz and similar error at compile time on ng serve

  1. responseTypeを 'text [return this.http.get（this.streamURL、{responseType：' text '}）;]として言及しない場合...コンパイル時にエラーが発生します：

Src/app/myS.service.ts（24,54）のエラー：エラーTS2322：タイプ '"text"'はタイプ '"json"'に割り当てることができません

Node JSバックエンドから「テキスト」データをキャプチャするにはどうすればよいですか... Nodeでnpmcorsを使用しているので、CORSエラーはありません

デモコードはこちらから入手できます： https://stackblitz.com/edit/angular-44sess

私のバックエンドは以下のスニペットにあります：

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);
  
});
node.jsangularangular7chunked
3
Akber Iqbal

この場合、私は常に次のパターンを使用します。

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

それがあなたの質問に答えることを願っています！

10
Ieremias Viorel

Returnジェネリック型は使用できません。ドキュメントでは、ジェネリック型は「json」専用です。これは、次のように使用する必要があることを意味します。

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

ドキュメントを参照してください https://angular.io/api/common/http/HttpClient#get オーバーロード＃11に関心があり、現在オーバーロード＃13を使用しています

最後に、これは更新されたコードへのリンクです： https://stackblitz.com/edit/angular-gv1tkl?file=src/app/myS.service.ts

編集1

Stackblitzに間違ったリンクを貼り付けました。上記を修正してください。

5
Łukasz Wojtanowski