阅读 Fetch Promise 的正文

Posted 2023-02-27

【中文标题】阅读 Fetch Promise 的正文

【英文标题】：Read the body of a 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);) 向控制台记录了什么？

【参考方案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