剖析 fetch 下载文件的 4 个步骤：上手实践，化繁为简

fetch 下载文件步骤详解

1. 通过 blob 下载文件

第一步是使用 fetch API 发起请求，并通过 blob 来下载文件。blob 是一个二进制大对象，它可以存储各种类型的数据，包括文件。

fetch('https://example.com/file.txt')
  .then(res => res.blob())
  .then(blob => {
    // 保存 blob
  });

2. 保存成文件

接下来，我们需要将 blob 保存成一个文件。我们可以使用 File API 来实现这一点。

const file = new File([blob], 'file.txt', {
  type: 'text/plain'
});

saveAs(file);

3. 读取文件流

如果我们需要在保存文件之前读取文件流，我们可以使用 FileReader API。

const reader = new FileReader();

reader.onload = function() {
  // 读取文件流
};

reader.readAsArrayBuffer(blob);

4. 将文件流转换成 blob

在某些情况下，我们需要将文件流转换成 blob。我们可以使用以下代码来实现这一点。

const blob = new Blob([arrayBuffer], {
  type: 'text/plain'
});

实例和代码示例

为了帮助您更好地理解上述步骤，我们提供了一些实例和代码示例。

实例 1：下载并保存文件

fetch('https://example.com/file.txt')
  .then(res => res.blob())
  .then(blob => {
    const file = new File([blob], 'file.txt', {
      type: 'text/plain'
    });

    saveAs(file);
  });

实例 2：读取文件流

fetch('https://example.com/file.txt')
  .then(res => res.blob())
  .then(blob => {
    const reader = new FileReader();

    reader.onload = function() {
      // 读取文件流
    };

    reader.readAsArrayBuffer(blob);
  });

实例 3：将文件流转换成 blob

const arrayBuffer = new ArrayBuffer(1024);

const blob = new Blob([arrayBuffer], {
  type: 'text/plain'
});

结语

通过本文，您已经掌握了使用 fetch 下载文件的 4 个简单步骤。您可以根据自己的需要，灵活运用这些步骤来下载各种类型