web-dev-qa-db-ja.com

Fetch Promiseの本文を読む

これには簡単な答えがあると確信していますが、私の人生では、その方法を理解することはできません。

Google Cloudストレージにアップロードするための次のエクスプレスエンドポイントがあります。それはうまく機能し、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）で書いた応答はどこにも表示されません

クライアント側の応答本文からこの情報を取得する方法についての提案はありますか？

編集：

Console.logでdataは次のようになります。

Screenshot of the data console.log

編集2：

これは、Postmanを使用してエンドポイントにPOSTファイルを送信したときに受け取る応答です。 Screen shot of response using Postman

javascriptnode.jsfetch-api
33
quicklikerabbit

Responseオブジェクト を扱っていることに注意してください。データを表示するには、基本的にreadResponse.json()またはResponse.text()で（または他の方法で）応答ストリームを読み取る必要があります。それ以外の場合、応答本文は常にロックされた読み取り可能なストリームとして表示されます。例えば：

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

これにより予期しない結果が得られる場合は、 Postman を使用して応答を検査できます。

47
Gabe Rogan

@GabeRoganは私に答えを与えました（そして予想通りタイプミスがありました）

これが、応答本文テキストを返すフロントエンドの更新されたコードです。

Client.upload(this.file).then(response => response.text())
  .then((body) => {
    console.log(body);
  });

bodyは、「一意のファイル名：[ファイル名]」という文字列です。

編集：

Fetch APIの説明とpromiseオブジェクトから取得した応答の読み取りを以下に示します。 https://css-tricks.com/using-fetch/

6
quicklikerabbit