从iOS 11以下优雅解决fetch API中无法克隆被干扰的响应的兼容问题

前端

2024-01-21 09:23:45

探索问题：无法克隆被干扰的响应

在iOS 11及更早版本中，使用fetch API进行网络请求时，如果服务器端响应了一个被干扰的（disturbed）响应，则您可能会遇到无法克隆（clone）该响应的错误。当响应流被中途终止或中断时，就会出现这种干扰。

探究原因：流的关闭

当您使用fetch API发送请求时，浏览器会在网络和服务器之间建立一个流连接。在iOS 11及更早版本中，如果在流尚未完成时关闭了连接，则会引发“无法克隆被干扰的响应”错误。

提出解决方案：克隆之前等待流完成

为了避免此问题，您需要确保在克隆响应之前等待流完成。您可以通过以下方法来实现：

使用read()方法 ：您可以使用read()方法来读取响应流中的所有内容，并将其存储在一个变量中。当流完全读取完成后，您可以克隆该变量，而无需担心被干扰的问题。
使用async/await ：如果您使用的是ES7或更高版本，则可以使用async/await语法来等待流完成。这是一种更简洁的方法，可以让您的代码更加易读。

实例解析：提供示例代码

// 使用 read() 方法
fetch("https://example.com/api/data")
  .then((response) => response.read())
  .then((data) => {
    // 克隆响应
    const clonedResponse = response.clone();
  });

// 使用 async/await
async function fetchData() {
  const response = await fetch("https://example.com/api/data");
  const data = await response.read();

  // 克隆响应
  const clonedResponse = response.clone();
}
fetchData();