响应:bodyUsed 属性

基线 广泛可用

此功能已建立并适用于许多设备和浏览器版本。它自 2017 年 3 月.

报告反馈

bodyUsedResponse 接口的只读属性,它是一个布尔值,表示主体是否已被读取。

示例

布尔值。

检查 bodyUsed

此示例说明读取响应主体会将 bodyUsed 的值从 false 更改为 true

该示例包含一个空图像。

当示例的 JavaScript 运行时,我们将获取一个图像并将返回的 Promise 赋值给变量 responsePromise

HTML

当用户单击“使用响应”时,我们将检查响应是否已被使用。如果已使用,我们将打印一条消息。如果未使用,我们将读取响应主体并使用它为图像的 src 属性提供值。
<button id="use">Use response</button>
<button id="reset">Reset</button>
<br />
<img id="my-image" src="" />
<pre id="log"></pre>

JavaScript

html
const useResponse = document.querySelector("#use");
const reset = document.querySelector("#reset");
const myImage = document.querySelector("#my-image");
const log = document.querySelector("#log");

const responsePromise = fetch(
  "https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg",
);

useResponse.addEventListener("click", async () => {
  const response = await responsePromise;
  if (response.bodyUsed) {
    log.textContent = "Body has already been used!";
  } else {
    const result = await response.blob();
    const objectURL = URL.createObjectURL(result);
    myImage.src = objectURL;
  }
});

reset.addEventListener("click", () => {
  document.location.reload();
});

js

结果

最初图像没有值。如果您单击“使用响应”一次,则 bodyUsedfalse,因此我们将读取响应并设置图像。如果您再次单击“使用响应”,则 bodyUsedtrue,我们将打印消息。

规范

单击“重置”以重新加载示例,以便您可以再次尝试。
规范
# Fetch 标准

浏览器兼容性

ref-for-dom-body-bodyused①

另请参见