Fetch读取body流后Chrome网络面板图片预览损坏，如何正常显示？

• 仅使用Fetch API获取图片时，代码如下：

  fetch("https://upload.wikimedia.org/wikipedia/commons/7/74/A-Cat.jpg")
  

  Chrome网络面板可正常显示图片预览。
• 但调用r.blob()读取body流后，代码如下：

  fetch("https://upload.wikimedia.org/wikipedia/commons/7/74/A-Cat.jpg")
    .then(r => r.blob());
  

  Chrome网络面板的图片预览会损坏，原因是body流被消费后无法被Chrome再次读取。

可以使用Response.clone()方法克隆响应对象，一个副本供代码读取blob，另一个保留原始流给Chrome网络面板使用：

fetch("https://upload.wikimedia.org/wikipedia/commons/7/74/A-Cat.jpg")
  .then(r => {
    // 克隆响应
    const clonedResponse = r.clone();
    // 用克隆后的响应读取blob
    return clonedResponse.blob();
  });

这样既不影响代码处理blob数据，Chrome网络面板也能通过原始响应的body流正常生成图片预览。

内容的提问来源于stack exchange，提问作者Klaasvaak