如何解决Fetch API中响应流已读取的重复读取错误？

问题核心 #

Fetch API 的响应体是只能消费一次的可读流，直接先后调用text()和json()会导致第二次读取失败；你用clone()时的错误在于：

1. clone()是同步方法，不需要加await
2. 调用text()时未加await，所以得到的是Promise对象而非实际文本

正确解决方案 #

方案一：使用响应克隆（通用场景） #

先克隆响应对象，分别从原始响应和克隆副本读取不同格式的数据：

if (api_response_text == 'true') {
  const api_request = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(item),
  }).then(async api_response => {
    // 同步克隆响应，无需await
    const responseClone = api_response.clone();
    
    // 从克隆副本读取文本
    const api_response_text = await responseClone.text();
    
    if (api_response.ok) {
      if (onCompleted) {
        // 从原始响应读取JSON（流未被消费）
        onCompleted(await api_response.json());
      }    
    } else {                
      console.log(api_response_text)
    }
  });
}

方案二：先读JSON再转文本（响应为JSON格式时） #

如果确定响应内容是合法JSON，可以先读取JSON数据，再通过JSON.stringify()转成文本形式，避免克隆：

if (api_response_text == 'true') {
  const api_request = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(item),
  }).then(async api_response => {
    if (api_response.ok) {
      const jsonData = await api_response.json();
      if (onCompleted) {
        onCompleted(jsonData);
      }
      // 将JSON数据转为文本格式
      const api_response_text = JSON.stringify(jsonData);
      // 可在此处使用文本做后续操作
    } else {
      // 错误场景直接读取文本
      const api_response_text = await api_response.text();
      console.log(api_response_text)
    }
  });
}

关键注意点 #

• 响应体的text()、json()等读取方法都是异步操作，必须用await或.then()获取结果，否则返回的是Promise对象。
• clone()方法用于创建响应副本，副本的流与原始流相互独立，可分别消费，且该方法是同步执行的，不需要加await。

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