读取 Fetch Promise 的主体

新手上路,请多包涵

我有以下用于上传到谷歌云存储的快速端点。它工作得很好,来自 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 在我控制台记录时看起来像这样:

数据控制台.log截图

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

使用 Postman 的响应屏幕截图

原文由 quicklikerabbit 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 246
2 个回答

请注意,您正在处理一个 Response 对象。您基本上需要使用 Response.json()Response.text() (或通过其他方法) 读取 响应流才能查看您的数据。否则,您的响应主体将始终显示为锁定的可读流。例如:

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

如果这会给您带来意想不到的结果,您可能需要使用 Postman 检查您的响应。

原文由 Gabe Rogan 发布,翻译遵循 CC BY-SA 4.0 许可协议

正如 GabeRogan此评论 中指出的那样,我的代码中有一个错字:

好的,太棒了。老实说,我完全不知道为什么你会变得不确定,除了它可能是某种拼写错误之外?

这是我更新的前端代码,它返回响应正文文本:

 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

原文由 quicklikerabbit 发布,翻译遵循 CC BY-SA 4.0 许可协议

推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏