相同网址的提取响应大小不同

时间:2020-08-21 10:04:48

标签: javascript fetch es6-promise

我正在使用访存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()

2 个答案:

答案 0 :(得分:2)

您从getReader()收到的阅读器使用内部队列。 read()的文档中指出:

ReadableStreamDefaultReader界面的 read() 方法返回一个诺言,提供对流内部队列中下一个块的访问。

多次获取可能会最终以不同的方式对远程数据进行分块,从而导致长度不同。要读取流以完成操作,请检查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(),{{ 3}}或json()取决于您期望的数据类型。提到的响应方法都读取响应流以完成操作。

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()

答案 1 :(得分:1)

@ 3limin4t0r的答案是正确的。问题不是由Dropbox压缩文件引起的,而是由于.read()方法返回字节流以及一个承诺...

“可以访问流内部队列中的下一个块。”

您要检索的值有时只是流/队列中的第一个块。您必须等到阅读器完成流的读取。