JavaScript 中如何实现大文件并行下载？

在 JavaScript 中如何实现并发控制？这篇文章中，阿宝哥详细分析了 async-pool 这个库如何利用 Promise.all 和 Promise.race 函数实现异步任务的并发控制。本文阿宝哥将介绍如何利用 async-pool 这个库提供的 asyncPool 函数来实现大文件的并行下载。javascript

相信有些小伙伴已经了解大文件上传的解决方案，在上传大文件时，为了提升上传的效率，咱们通常会使用 Blob.slice 方法对大文件按照指定的大小进行切割，而后在开启多线程进行分块上传，等全部分块都成功上传后，再通知服务端进行分块合并。java

那么对大文件下载来讲，咱们可否采用相似的思想呢？在服务端支持 Range 请求首部的条件下，咱们也是能够实现多线程分块下载的功能，具体以下图所示：git

看完上图相信你对大文件下载的方案，已经有了必定的了解。接下来，咱们先来介绍 HTTP 范围请求。github

关注「全栈修仙之路」阅读阿宝哥原创的 4 本免费电子书（累计下载 3万+）及 11 篇 Vue 3 进阶系列教程。shell

1、HTTP 范围请求

HTTP 协议范围请求容许服务器只发送 HTTP 消息的一部分到客户端。范围请求在传送大的媒体文件，或者与文件下载的断点续传功能搭配使用时很是有用。若是在响应中存在 Accept-Ranges 首部（而且它的值不为 “none”），那么表示该服务器支持范围请求。数组

在一个 Range 首部中，能够一次性请求多个部分，服务器会以 multipart 文件的形式将其返回。若是服务器返回的是范围响应，须要使用 206 Partial Content 状态码。假如所请求的范围不合法，那么服务器会返回 416 Range Not Satisfiable 状态码，表示客户端错误。服务器容许忽略 Range 首部，从而返回整个文件，状态码用 200 。浏览器

1.1 Range 语法

Range: <unit>=<range-start>-
Range: <unit>=<range-start>-<range-end>
Range: <unit>=<range-start>-<range-end>, <range-start>-<range-end>
Range: <unit>=<range-start>-<range-end>, <range-start>-<range-end>, <range-start>-<range-end>
复制代码

unit：范围请求所采用的单位，一般是字节（bytes）。
<range-start>：一个整数，表示在特定单位下，范围的起始值。
<range-end>：一个整数，表示在特定单位下，范围的结束值。这个值是可选的，若是不存在，表示此范围一直延伸到文档结束。

了解完 Range 语法以后，咱们来看一下实际的使用示例：bash

1.1.1 单一范围

$ curl http://i.imgur.com/z4d4kWk.jpg -i -H "Range: bytes=0-1023"
复制代码

1.1.2 多重范围

$ curl http://www.example.com -i -H "Range: bytes=0-50, 100-150"
复制代码

好了，HTTP 范围请求的相关知识就先介绍到这里，下面咱们步入正题开始介绍如何实现大文件下载。服务器

2、如何实现大文件下载

为了让你们可以更好地理解后面的内容，咱们先来看一下总体的流程图：微信

了解完大文件下载的流程以后，咱们先来定义上述流程中涉及的一些辅助函数。

2.1 定义辅助函数

2.1.1 定义 getContentLength 函数

顾名思义 getContentLength 函数，用于获取文件的长度。在该函数中，咱们经过发送 HEAD 请求，而后从响应头中读取 Content-Length 的信息，进而获取当前 url 对应文件的内容长度。

function getContentLength(url) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open("HEAD", url);
    xhr.send();
    xhr.onload = function () {
      resolve(
        ~~xhr.getResponseHeader("Content-Length") 
      );
    };
    xhr.onerror = reject;
  });
}
复制代码

2.1.2 定义 asyncPool 函数

在 JavaScript 中如何实现并发控制？这篇文章中，咱们介绍了 asyncPool 函数，它用于实现异步任务的并发控制。该函数接收 3 个参数：

poolLimit（数字类型）：表示限制的并发数；
array（数组类型）：表示任务数组；
iteratorFn（函数类型）：表示迭代函数，用于实现对每一个任务项进行处理，该函数会返回一个 Promise 对象或异步函数。

async function asyncPool(poolLimit, array, iteratorFn) {
  const ret = []; // 存储全部的异步任务
  const executing = []; // 存储正在执行的异步任务
  for (const item of array) {
    // 调用iteratorFn函数建立异步任务
    const p = Promise.resolve().then(() => iteratorFn(item, array));
    ret.push(p); // 保存新的异步任务

    // 当poolLimit值小于或等于总任务个数时，进行并发控制
    if (poolLimit <= array.length) {
      // 当任务完成后，从正在执行的任务数组中移除已完成的任务
      const e = p.then(() => executing.splice(executing.indexOf(e), 1));
      executing.push(e); // 保存正在执行的异步任务
      if (executing.length >= poolLimit) {
        await Promise.race(executing); // 等待较快的任务执行完成
      }
    }
  }
  return Promise.all(ret);
}
复制代码

2.1.3 定义 getBinaryContent 函数

getBinaryContent 函数用于根据传入的参数发起范围请求，从而下载指定范围内的文件数据块：

function getBinaryContent(url, start, end, i) {
  return new Promise((resolve, reject) => {
    try {
      let xhr = new XMLHttpRequest();
      xhr.open("GET", url, true);
      xhr.setRequestHeader("range", `bytes=${start}-${end}`); // 请求头上设置范围请求信息
      xhr.responseType = "arraybuffer"; // 设置返回的类型为arraybuffer
      xhr.onload = function () {
        resolve({
          index: i, // 文件块的索引
          buffer: xhr.response, // 范围请求对应的数据
        });
      };
      xhr.send();
    } catch (err) {
      reject(new Error(err));
    }
  });
}
复制代码

须要注意的是 ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。咱们不能直接操做 ArrayBuffer 的内容，而是要经过类型数组对象或 DataView 对象来操做，它们会将缓冲区中的数据表示为特定的格式，并经过这些格式来读写缓冲区的内容。

2.1.4 定义 concatenate 函数

因为不能直接操做 ArrayBuffer 对象，因此咱们须要先把 ArrayBuffer 对象转换为 Uint8Array 对象，而后在执行合并操做。如下定义的 concatenate 函数就是为了合并已下载的文件数据块，具体代码以下所示：

function concatenate(arrays) {
  if (!arrays.length) return null;
  let totalLength = arrays.reduce((acc, value) => acc + value.length, 0);
  let result = new Uint8Array(totalLength);
  let length = 0;
  for (let array of arrays) {
    result.set(array, length);
    length += array.length;
  }
  return result;
}
复制代码

2.1.5 定义 saveAs 函数

saveAs 函数用于实现客户端文件保存的功能，这里只是一个简单的实现。在实际项目中，你能够考虑直接使用 FileSaver.js 。若是你对 FileSaver.js 的工做原理感兴趣的话，能够阅读聊一聊 15.5K 的 FileSaver，是如何工做的？这篇文章。

function saveAs({ name, buffers, mime = "application/octet-stream" }) {
  const blob = new Blob([buffers], { type: mime });
  const blobUrl = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.download = name || Math.random();
  a.href = blobUrl;
  a.click();
  URL.revokeObjectURL(blob);
}
复制代码

在 saveAs 函数中，咱们使用了 Blob 和 Object URL。其中 Object URL 是一种伪协议，容许 Blob 和 File 对象用做图像，下载二进制数据连接等的 URL 源。在浏览器中，咱们使用 URL.createObjectURL 方法来建立 Object URL，该方法接收一个 Blob 对象，并为其建立一个惟一的 URL，其形式为 blob:<origin>/<uuid>，对应的示例以下：

blob:https://example.org/40a5fb5a-d56d-4a33-b4e2-0acf6a8e5f641
复制代码

浏览器内部为每一个经过 URL.createObjectURL 生成的 URL 存储了一个 URL → Blob 映射。所以，此类 URL 较短，但能够访问 Blob。生成的 URL 仅在当前文档打开的状态下才有效。好了，Object URL 的相关内容就先介绍到这里，若是你进一步了解 Blob 和 Object URL 的话，能够阅读你不知道的 Blob 这篇文章。

2.1.6 定义 download 函数

download 函数用于实现下载操做，它支持 3 个参数：

url（字符串类型）：预下载资源的地址；
chunkSize（数字类型）：分块的大小，单位为字节；
poolLimit（数字类型）：表示限制的并发数。

async function download({ url, chunkSize, poolLimit = 1 }) {
  const contentLength = await getContentLength(url);
  const chunks = typeof chunkSize === "number" ? Math.ceil(contentLength / chunkSize) : 1;
  const results = await asyncPool(
    poolLimit,
    [...new Array(chunks).keys()],
    (i) => {
      let start = i * chunkSize;
      let end = i + 1 == chunks ? contentLength - 1 : (i + 1) * chunkSize - 1;
      return getBinaryContent(url, start, end, i);
    }
  );
  const sortedBuffers = results
    .map((item) => new Uint8Array(item.buffer));
  return concatenate(sortedBuffers);
}
复制代码

2.2 大文件下载使用示例

基于前面定义的辅助函数，咱们就能够轻松地实现大文件并行下载，具体代码以下所示：

function multiThreadedDownload() {
  const url = document.querySelector("#fileUrl").value;
  if (!url || !/https?/.test(url)) return;
  console.log("多线程下载开始: " + +new Date());
  download({
    url,
    chunkSize: 0.1 * 1024 * 1024,
    poolLimit: 6,
  }).then((buffers) => {
    console.log("多线程下载结束: " + +new Date());
    saveAs({ buffers, name: "个人压缩包", mime: "application/zip" });
  });
}
复制代码

因为完整的示例代码内容比较多，阿宝哥就不放具体的代码了。感兴趣的小伙伴，能够访问如下地址浏览示例代码。

完整的示例代码：gist.github.com/semlinker/8…

这里咱们来看一下大文件下载示例的运行结果：

3、总结

本文介绍了在 JavaScript 中如何利用 async-pool 这个库提供的 asyncPool 函数，来实现大文件的并行下载。除了介绍 asyncPool 函数以外，阿宝哥还介绍了如何经过 HEAD 请求获取文件大小、如何发起 HTTP 范围请求及在客户端如何保存文件等相关知识。其实利用 asyncPool 函数不只能够实现大文件的并行下载，并且还能够实现大文件的并行上传，感兴趣的小伙伴能够自行尝试一下。

关注「全栈修仙之路」阅读阿宝哥原创的 4 本免费电子书（累计下载 3万+）及 11 篇 Vue 3 进阶系列教程。想一块儿学习 TS/Vue 3.0 的小伙伴能够添加阿宝哥微信 —— semlinker。