在浏览器中使用JavaScript读取带有for await的流

fetch 有进度指示:

const url = 'https://source.unsplash.com/random';
const response = await fetch(url);
const total = Number(response.headers.get('content-length'));
let loaded = 0;
const reader = response.body.getReader();
let result;
while (!(result = await reader.read()).done) {
  loaded += result.value.length;
  // Display loaded/total in the UI
}

我在一个 related question 这使我相信这可以简化为:

const url = 'https://source.unsplash.com/random';
const response = await fetch(url);
const total = Number(response.headers.get('content-length'));
let loaded = 0;
for await (const result of response.body.getReader()) {
  loaded += result.value.length;
  // Display loaded/total in the UI
}

getReader 返回 ReadableStreamDefaultReader 它来自 Streams API 这是一个web API和一个节点API,这使得只查找与web相关的信息非常困难。

在上面的代码片段中,失败的原因是 . 我检查了对象原型,但实际上我认为它没有 Symbol.asyncIterator 所以浏览器没能遍历它也就不足为奇了。

是 有一种方法可以获取这样的流并使用 for-await ? 我想您需要将它包装在异步生成器中,并以类似于第一个片段的方式生成块,对吧?