Response: bytes() 方法

bytes() 方法是 Response 接口的一部分，它接收一个 Response 流并将其读取到完成。它返回一个 Promise，该 Promise 解析为一个 Uint8Array。

语法

js
bytes()

参数

无。

返回值

一个解析为 Uint8Array 的 Promise。

异常

DOMException AbortError

请求已被 中止。

TypeError

由于以下原因之一而抛出

RangeError

创建关联的 ArrayBuffer 时出现问题。例如，如果数据大小超过 Number.MAX_SAFE_INTEGER。

示例

获取和解码文件

以下代码展示了如何获取文本文件，将主体作为 Uint8Array 返回，然后将其解码为字符串。

js
const response = await fetch("https://www.example.com/textfile.txt");
const textFile = await response.bytes();
const string = new TextDecoder().decode(textFile);
console.log(string);

获取图像文件签名

此示例演示了如何使用 bytes() 读取多个图像文件的签名字节并识别其类型。

HTML

首先，我们定义一个用于选择文件类型的 <select> 元素，其对应值指示要获取的 WikiMedia Commons 上的特定文件。

html
<label for="file-select">Choose a file:</label>

<select name="Files" id="file-select">
  <option value="">--Select an image type--</option>
  <option
    value="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png">
    PNG
  </option>
  <option
    value="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg">
    JPG
  </option>
  <option
    value="https://upload.wikimedia.org/wikipedia/commons/8/8f/Example.gif">
    GIF89a
  </option>
</select>

JavaScript

代码首先检查是否支持 bytes() 方法。如果支持该方法，则会为 <select> 元素上的 change 事件 添加事件处理程序。当值更改时，它会将所选值的 URL（图像文件的 URL）传递给下面定义的 checkSignature() 方法。如果该方法不受支持，则会记录此信息。

js
if ("bytes" in Response.prototype) {
  const selectFileElement = document.getElementById("file-select");
  selectFileElement.addEventListener("change", (event) => {
    try {
      checkSignature(event.target.value);
    } catch (e) {
      log(e);
    }
  });
} else {
  log("Response.bytes() not supported");
}

下面定义了 checkSignature() 方法。它在给定的 url 处获取文件，并使用 response.bytes() 将其内容作为字节数组获取。然后将初始字节与多个常见文件类型的初始签名字节进行比较。然后记录文件名和文件类型。

js
async function checkSignature(url) {
  if (url == "") return;
  log(`File: ${url}`);
  const response = await fetch(url);
  const image = await response.bytes();

  // File signatures from: https://en.wikipedia.org/wiki/List_of_file_signatures
  const jpgSignature = [0xff, 0xd8, 0xff, 0xe0];
  const pngSignature = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
  const gif89aSignature = [0x47, 0x49, 0x46, 0x38, 0x39, 0x61];

  if (
    image
      .slice(0, jpgSignature.length)
      .every((byte, index) => byte === jpgSignature[index])
  ) {
    log(`JPG signature: FF D8 FF E0`);
  } else if (
    image
      .slice(0, pngSignature.length)
      .every((byte, index) => byte === pngSignature[index])
  ) {
    log(`PNG signature: 89 50 4E 47 0D 0A 1A 0A`);
  } else if (
    image
      .slice(0, gif89aSignature.length)
      .every((byte, index) => byte === gif89aSignature[index])
  ) {
    log(`GIF (GIF89a) signature: 47 49 46 38 39 61`);
  } else {
    log("Unknown format");
  }
}

结果

使用选择列表选择图像类型。然后，日志应显示文件名以及根据文件签名确定的文件类型。

规范

规范
Fetch 标准
# dom-body-bytes

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅