阅读 Fetch Promise 的正文答案

【问题标题】：Read the body of a Fetch Promise阅读 Fetch Promise 的正文
【发布时间】：2017-10-09 18:27:00
【问题描述】：

我有以下用于上传到 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) 中写的回复

如何从客户端的响应正文中检索此信息？

data 在我 console.log 时看起来像这样：

这是我使用 Postman 将文件发布到端点时得到的响应：

【问题讨论】：

当您console.log 时，您的data 看起来像什么？
添加截图
谢谢，我想我知道问题所在了，给我一秒钟
fetch('[YOURENDPOINT]').then(response=>response.text()).then(data=>{ console.log(data);}) 向控制台记录了什么？

标签： javascript node.js fetch-api

【解决方案1】：

请注意，您正在处理的是 Response object。您基本上需要使用Response.json() 或Response.text()（或通过其他方法）读取响应流，以便查看您的数据。否则，您的响应正文将始终显示为锁定的可读流。例如：

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

如果这会给您带来意想不到的结果，您可能需要检查您对Postman 的回复。

【讨论】：

如果我使用response.text 或response.blob，我将得到undefined 的console.log(data)。如果我使用 response.json：Uncaught (in promise) SyntaxError: Unexpected token U in JSON at position 0，则会出现语法错误。我认为“U”来自我的“独特”，所以我认为你在正确的轨道上
此外，您无法从我发布的屏幕截图中看到这一点，但将 ... 扩展为 ReadableStream 中的 locked 项目将显示为 false
@quicklikerabbit 当你用 Postman 之类的东西到达终点时，你会得到什么？
Postman 返回正文中的唯一文件名，确认它确实存在。现在的诀窍是使用 Javascript 获取正文！
我只需要用.text() 替换.json()，这就是我的解决方案。谢谢。

【解决方案2】：

正如GabeRogan 在this comment 中指出的那样，我的代码中有错字：

好的，太棒了。老实说，除了可能是某种拼写错误之外，我完全不知道您为什么会变得未定义？

这是我更新的前端代码，它返回响应正文：

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

body 是一个字符串，读作Unique File Name: [FILE-NAME]

这里很好地解释了 Fetch API 并阅读了您从 Promise 对象获得的响应：Css tricks: Using Fetch。

【讨论】：

【解决方案3】：

你也可以使用 async/await：

返回json内容时：

Client.upload(this.file).then(async r => console.log(await r.json()))

或者只是以文本形式返回：

Client.upload(this.file).then(async r => console.log(await r.text()))

【讨论】：

是的，你必须“等待”，否则你会得到一个承诺而不是你期望的值。

【解决方案4】：

如果您收到“未定义”的数据并且您正在对响应执行某些操作，请确保返回响应。

我正在做这样的事情

fetch(URL)
    .then(response => {
        response.text();
        console.log(response.statusText);
    })
    .then(data => console.log(data)); // got "undefined"

返回响应对象：return response.text();

fetch(URL)
    .then(response => {
        console.log(response.statusText);
        return response.text();
    })
    .then(data => console.log(data)); // got data

【讨论】：