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

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

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

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

一、http 范围请求

http 协议范围请求允许服务器只发送 http 消息的一部分到客户端。范围请求在传送大的媒体文件，或者与文件下载的断点续传功能搭配使用时非常有用。如果在响应中存在 accept-ranges 首部（并且它的值不为 “none”），那么表示该服务器支持范围请求。

在一个 range 首部中，可以一次性请求多个部分，服务器会以 multipart 文件的形式将其返回。如果服务器返回的是范围响应，需要使用 206 partial content 状态码。假如所请求的范围不合法，那么服务器会返回  416 range not satisfiable 状态码，表示客户端错误。服务器允许忽略  range  首部，从而返回整个文件，状态码用 200 。

1.1 range 语法

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

了解完 range 语法之后，我们来看一下实际的使用示例：

1.1.1 单一范

1.1.2 多重范围

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

二、如何实现大文件下载

为了让大家能够更好地理解后面的内容，我们先来看一下整体的流程图：

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

2.1 定义辅助函数

2.1.1 定义 getcontentlength 函数

顾名思义 getcontentlength 函数，用于获取文件的长度。在该函数中，我们通过发送 head 请求，然后从响应头中读取 content-length 的信息，进而获取当前 url 对应文件的内容长度。

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

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

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

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

2.1.4 定义 concatenate 函数
由于不能直接操作 arraybuffer 对象，所以我们需要先把 arraybuffer 对象转换为 uint8array 对象，然后在执行合并操作。以下定义的 concatenate 函数就是为了合并已下载的文件数据块，具体代码如下所示：

2.1.5 定义 saveas 函数
saveas 函数用于实现客户端文件保存的功能，这里只是一个简单的实现。在实际项目中，你可以考虑直接使用 filesaver.js 。

在 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 的相关内容就先介绍到这里

2.1.6 定义 download 函数

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

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

2.2 大文件下载使用示例

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

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

完整的示例代码：

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

三、总结

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

以上就是javascript 中如何实现大文件并行下载的详细内容，更多关于javascript 大文件并行下载的资料请关注其它相关文章！