TypeError: Failed to execute ‘blob‘ on ‘Response‘: body stream already read

这个错误信息是JavaScript中的一个常见错误，通常出现在使用Fetch API时。具体来说，当你尝试从一个Response对象中读取数据时，如果已经读取过一次数据流，再次尝试读取就会导致这个错误。

错误原因

在Fetch API中，Response对象的body是一个一次性可读的流。这意味着你只能读取一次数据流。一旦数据流被读取（例如通过response.json()、response.text()或response.blob()等方法），它就不能再被读取。

代码示例

以下是一个可能导致该错误的代码示例：

fetch('https://example.com/data')
  .then(response => {
    return response.json(); // 第一次读取流
  })
  .then(data => {
    console.log(data);
    return response.blob(); // 第二次尝试读取流，导致错误
  })
  .catch(error => {
    console.error('Error:', error);
  });

解决方案

要解决这个问题，你需要确保每个Response对象的流只被读取一次。如果你需要多次使用数据，可以在第一次读取时将其存储在一个变量中。

解决方案示例

fetch('https://example.com/data')
  .then(response => {
    return response.json(); // 读取流并存储数据
  })
  .then(data => {
    console.log(data);
    // 如果需要多次使用数据，可以在这里处理
  })
  .catch(error => {
    console.error('Error:', error);
  });

相关文档

• Fetch API - MDN
• Response - MDN

通过这些文档，你可以更深入地了解Fetch API和Response对象的工作原理。

​