无法多次调用Fetch API？报错TypeError: Response体流已读取求助

嘿，这个坑我之前踩过！你代码里的问题一眼就能看出来——你重复利用了同一个fetch返回的Promise对象a，还两次调用了它的.json()方法。

为啥会报错？ #

Fetch API返回的Response对象里的body是个「可读流」，这个流有个关键特性：只能被读取一次。第一次调用.json()的时候，已经把整个流的内容读完并解析成JSON了；等你第二次再调用.json()，流已经空了，自然就会抛出"body stream already read"的错误。

看你的代码，你把fetch(thisIsUrl)的结果存在了变量a里，然后先后两次给a绑定.then()回调，每次都尝试读取流解析JSON，这就直接触发了这个问题。

怎么修复？ #

有两种靠谱的解决方式，选哪种看你的需求：

方式一：解析一次数据，复用结果（推荐）

如果只是需要多次使用API返回的数据，完全没必要重复读取流。第一次解析后把数据存下来，后续直接用这个解析好的对象就行：

let thisIsUrl = 'https://api.covid19api.com/summary'; 
fetch(thisIsUrl)
  .then((data) => {
    return data.json() // 这里只解析一次流
  })
  .then((apidata) => {
    console.log('第一次打印数据:', apidata)
    // 直接复用已经解析好的apidata做其他操作
    console.log('第二次打印数据:', apidata)
    return apidata
  })
  .catch((error) => {
    console.log('请求出错:', error)
  })

方式二：发起两次独立的请求（仅在真的需要时用）

如果你确实需要两次独立的API调用（比如担心数据有更新），那每次都重新调用fetch就行，这样每次都会拿到一个新的Response对象，流也是新鲜的：

let thisIsUrl = 'https://api.covid19api.com/summary'; 

// 第一次请求
fetch(thisIsUrl)
  .then((data) => data.json())
  .then((apidata) => console.log('第一次请求数据:', apidata))
  .catch((error) => console.log('第一次请求出错:', error))

// 第二次请求
fetch(thisIsUrl)
  .then((fetchdata) => fetchdata.json())
  .then((readingData) => console.log('第二次请求数据:', readingData))
  .catch((err) => console.log('第二次请求出错:', err))

显然第一种方式更高效，能省一次网络请求，也避免了流读取的问题。

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