[解決済み] Fetch Promiseの本文を読む

質問

Google Cloud ストレージにアップロードするために、次のような express エンドポイントを持っています。これは非常にうまく機能し、Google API からの応答は、フロントエンドに戻したい一意のファイル名を与えてくれます。

app.post('/upload', (req, res) => {
  var form = new formidable.IncomingForm(),
  files = [],
  fields = [];

  form
    .on('field', function(field, value) {
      fields.push([field, value]);
    })
    .on('file', function(field, file) {
      files.push([field, file]);
    })
    .on('end', function() {
      console.log('-> upload done');
    });
  form.parse(req, function(err, fields, files){
    var filePath = files.file.path;
    bucket.upload(filePath, function(err, file, apiResponse){
      if (!err){
        res.writeHead(200, {'content-type': 'text/plain'});
        res.end("Unique File Name:" + file.name);
      }else{
        res.writeHead(500);
        res.end();
      }
    });
  });

 return;
});

ファイルを渡す短い関数を呼び出すことで、このエンドポイントに到達しています。

function upload(file) {
  var data = new FormData();
  data.append('file', file);
  return fetch(`upload`,{
    method: 'POST',
    body: data
  });
}

const Client = { upload };
export default Client;

この関数は、私のフロントエンドから次のように呼び出されます。

Client.upload(this.file).then((data) => {
  console.log(data);
});

この最後の console.log(data) はコンソールにレスポンスを記録します。しかし、私が書いた応答はどこにも表示されません ( "Unique File Name:" + file.name )

クライアント側でレスポンスボディからこの情報を取得するにはどうすればよいでしょうか？

このような場合 data は、console.logするとこのようになります。

これはPostmanを使ってファイルをエンドポイントにPOSTしたときに得られるレスポンスです。

どのように解決するのですか？

あなたが扱っているのは レスポンスオブジェクト . あなたは基本的に を読む で応答ストリームを Response.json() または Response.text() (あるいは他のメソッドで) を使ってデータを見ることができます。そうしないと、レスポンスボディは常にロックされた読み込み可能なストリームとして表示されます。例えば

fetch('https://api.ipify.org?format=json')
.then(response=>response.json())
.then(data=>{ console.log(data); })

もしこれが予期せぬ結果をもたらすのであれば、レスポンスに ポストマン .