Response：arrayBuffer() 方法

基线 广泛可用

此功能已得到很好的建立，并且可以在许多设备和浏览器版本上运行。 它自 2017 年 3 月.

The arrayBuffer() method of the Response interface takes a Response stream and reads it to completion. It returns a promise that resolves with an ArrayBuffer.

语法

js
arrayBuffer()

参数

无。

返回值

一个解析为 ArrayBuffer 的 Promise。

异常

DOMException AbortError

请求已 中止。

TypeError

因以下原因之一而引发

RangeError

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

示例

播放音乐

在我们的 Fetch 数组缓冲区示例 中，我们有一个“播放”按钮。 当按下时，getData() 函数将运行。 请注意，在播放之前，将下载完整的音频文件。 如果你需要在下载期间播放 OGG（流式传输） - 请考虑使用 HTMLAudioElement

js
new Audio("music.ogg").play();

在 getData() 中，我们使用 Request() 构造函数创建一个新请求，然后使用它来获取 OGG 音乐曲目。 我们还使用 AudioContext.createBufferSource 创建音频缓冲区源。 当获取成功时，我们使用 arrayBuffer() 从响应中读取 ArrayBuffer，使用 AudioContext.decodeAudioData() 解码音频数据，将解码后的数据设置为音频缓冲区源的缓冲区 (source.buffer)，然后将源连接到 AudioContext.destination。

getData() 运行完毕后，我们使用 start(0) 启动音频源播放，然后禁用播放按钮，使其在已播放时无法再次点击（这会导致错误。）

js
function getData() {
  const audioCtx = new AudioContext();

  return fetch("viper.ogg")
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP error, status = ${response.status}`);
      }
      return response.arrayBuffer();
    })
    .then((buffer) => audioCtx.decodeAudioData(buffer))
    .then((decodedData) => {
      const source = new AudioBufferSourceNode();
      source.buffer = decodedData;
      source.connect(audioCtx.destination);
      return source;
    });
}

// wire up buttons to stop and play audio

play.onclick = () => {
  getData().then((source) => {
    source.start(0);
    play.setAttribute("disabled", "disabled");
  });
};

读取文件

The Response() constructor accepts Files and Blobs, so it may be used to read a File into other formats.

js
function readFile(file) {
  return new Response(file).arrayBuffer();
}
html
<input type="file" onchange="readFile(this.files[0])" />

规范

规范
Fetch 标准
# ref-for-dom-body-arraybuffer①

浏览器兼容性

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

另请参阅