时间戳

首页 > 解决方案 > 相同 URL 的 fetch 响应大小不同

javascript - 相同 URL 的 fetch 响应大小不同

问题描述

我正在使用 fetch API 从服务器 URL 获取响应，但响应大小并非每次都如此。

大多数时候我得到大小为 262144 的响应数据，但有时大小小于那个大小。像大小为 65536 和 196608 的数据。

async function fetchData() {
  let url = "https://www.dl.dropboxusercontent.com/s/7d87jcsh0qodk78/fuel_64x64x64_uint8.raw?dl=1";
  let response = await fetch(url);
  let data = await response.body.getReader().read();
  data = data.value;
  if (data) {
    dataBuffer = new Uint8Array(data);
    console.log(data.length);
  } else {
    console.log("action aborted");
  }
}

fetchData()

标签： javascriptfetches6-promise

解决方案

您收到的阅读器getReader()使用内部队列。的文档read()说以下内容：

接口的read()方法ReadableStreamDefaultReader返回一个promise ，提供对流内部队列中下一个块的访问。

多次获取最终可能会以不同的方式对远程数据进行分块，从而导致不同的长度。要读取流以完成检查由done返回的值read()。

async function fetchData() {
  const url = "https://www.dl.dropboxusercontent.com/s/7d87jcsh0qodk78/fuel_64x64x64_uint8.raw?dl=1";
  const response = await fetch(url);
  const reader = response.body.getReader();
  
  let length = 0;
  let value, done;
  while ({value, done} = await reader.read(), !done) {
    length += value.length;
  }
  console.log(length);
}

fetchData()

但是，如果意图是在采取任何操作之前读取流以完成，那么您最好使用响应方法之一，例如arrayBuffer(), blob(), formData()，json()或者text()取决于您期望的数据类型。提到的响应方法都读取响应流以完成。

async function fetchData() {
  const url = "https://www.dl.dropboxusercontent.com/s/7d87jcsh0qodk78/fuel_64x64x64_uint8.raw?dl=1";
  const response = await fetch(url);
  const dataBuffer = new Uint8Array(await response.arrayBuffer());
  
  console.log(dataBuffer.length);
}

fetchData()

推荐阅读