Question

我正在尝试使用Fetch API readable streams下载多个文件。

const files = [.....]; // my file objects
const promises = [];
for (let i = 0; i < files.length; i += 1) {
  const file = files[i];
  promises.push(
    fetch(file.uri)
    .then(response => {
      const reader = response.body.getReader();

      return new ReadableStream({
        async start(controller) {
          while (true) {
            const { done, value } = await reader.read();
            // When no more data needs to be consumed, break the reading
            if (done) {
              break;
            }

            if (!file.content) {
              file.content = value;
            }
            else {
              file.content += value;
            }
            // Enqueue the next data chunk into our target stream
            controller.enqueue(value);
          }
          // Close the stream
          controller.close();
          reader.releaseLock();
        }
      });
    })
    .then(rs => new Response(rs))
  );
}
return Promise.all(promises).then(() => {
  // do something else once all the files are downloaded
  console.log('All file content downloaded');
});

此处的想法是使文件对象仅具有URI。然后，此代码将添加一个内容字段。在这之后，我可以做其他事情。

但是，实际上，代码顺序不正确。即以下几行紧接彼此。

return new ReadableStream({...});
console.log('All file content downloaded');

在下载文件内容之前，代码不会等待。上面的日志会提前打印。它运行后，我看到代码点击了

while (true) {

循环的代码。即文件内容流向的位置。

我显然误解了一个基本概念。如何等待文件内容下载并然后执行其他操作？即，流如何与promise.then（）模型一起工作。

fetch-API ReadableStream是否可以与promise.then（...）一起使用？

0 个答案: