秒懂！Axios请求头巧用Range下载超大文件！

2023-03-03 13:41:36

使用 Axios 请求头 Range 参数轻松下载超大文件

分段下载超大文件的利器

在现代 Web 应用中，处理超大文件下载的需求日益增加，例如高清视频、大型软件包等。直接下载这些文件可能会给服务器和浏览器带来压力，甚至导致下载失败。Axios 请求头 Range 参数的出现解决了这一难题，它允许您指定下载文件的范围，从而实现分段下载。

Range 参数的妙用

Axios 是 JavaScript 中流行的 HTTP 请求库，它允许您在请求头中添加 Range 参数。该参数的格式为 bytes=start-end，其中 start 和 end 表示要下载文件的范围。

如果不指定 end，则下载从 start 到文件末尾的部分。
如果不指定 start，则下载从文件开头到 end 的部分。

通过分段下载，我们可以减轻服务器和浏览器的压力，提高下载速度，并且支持断点续传，即使下载中断，也可以继续下载。

代码示例

以下是使用 Axios 分段下载超大文件的代码示例：

// 获取文件大小
axios.head('/large-file.zip')
  .then((response) => {
    const fileSize = parseInt(response.headers['content-length']);

    // 分段下载文件，每次下载 100MB
    const chunkSize = 100 * 1024 * 1024;
    const numChunks = Math.ceil(fileSize / chunkSize);

    // 创建一个数组来存储所有分段下载的 Promise
    const promises = [];

    for (let i = 0; i < numChunks; i++) {
      // 计算当前分段的范围
      const start = i * chunkSize;
      const end = (i + 1) * chunkSize - 1;

      // 创建分段下载的 Axios 实例
      const instance = axios.create({
        baseURL: 'http://example.com',
        headers: {
          'Range': `bytes=${start}-${end}`
        }
      });

      // 发送请求，将 Promise 添加到数组中
      promises.push(instance.get('/large-file.zip'));
    }

    // 等待所有分段下载完成
    Promise.all(promises)
      .then((responses) => {
        // 合并所有分段下载的文件流
        const blob = new Blob(responses.map((response) => response.data));

        // 保存文件
        saveAs(blob, 'large-file.zip');
      })
      .catch((error) => {
        // 处理错误
      });
  })
  .catch((error) => {
    // 处理错误
  });