JavaScript中實(shí)現(xiàn)大文件并行下載的示例分析

小編給大家分享一下JavaScript中實(shí)現(xiàn)大文件并行下載的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在 JavaScript 中如何實(shí)現(xiàn)并發(fā)控制? 這篇文章中，阿寶哥詳細(xì)分析了 async-pool 這個庫如何利用 Promise.all 和  Promise.race 函數(shù)實(shí)現(xiàn)異步任務(wù)的并發(fā)控制。本文阿寶哥將介紹如何利用 async-pool 這個庫提供的 asyncPool  函數(shù)來實(shí)現(xiàn)大文件的并行下載。

相信有些小伙伴已經(jīng)了解大文件上傳的解決方案，在上傳大文件時，為了提高上傳的效率，我們一般會使用 Blob.slice  方法對大文件按照指定的大小進(jìn)行切割，然后在開啟多線程進(jìn)行分塊上傳，等所有分塊都成功上傳后，再通知服務(wù)端進(jìn)行分塊合并。

那么對大文件下載來說，我們能否采用類似的思想呢?在服務(wù)端支持 Range 請求首部的條件下，我們也是可以實(shí)現(xiàn)多線程分塊下載的功能，具體如下圖所示：

看完上圖相信你對大文件下載的方案，已經(jīng)有了一定的了解。接下來，我們先來介紹 HTTP 范圍請求。

一、HTTP 范圍請求

HTTP 協(xié)議范圍請求允許服務(wù)器只發(fā)送 HTTP  消息的一部分到客戶端。范圍請求在傳送大的媒體文件，或者與文件下載的斷點(diǎn)續(xù)傳功能搭配使用時非常有用。如果在響應(yīng)中存在 Accept-Ranges  首部(并且它的值不為 “none”)，那么表示該服務(wù)器支持范圍請求。

在一個 Range 首部中，可以一次性請求多個部分，服務(wù)器會以 multipart 文件的形式將其返回。如果服務(wù)器返回的是范圍響應(yīng)，需要使用 206  Partial Content 狀態(tài)碼。假如所請求的范圍不合法，那么服務(wù)器會返回 416 Range Not Satisfiable  狀態(tài)碼，表示客戶端錯誤。服務(wù)器允許忽略 Range 首部，從而返回整個文件，狀態(tài)碼用 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：范圍請求所采用的單位，通常是字節(jié)（bytes）。

• <range-start>：一個整數(shù)，表示在特定單位下，范圍的起始值。

• <range-end>：一個整數(shù)，表示在特定單位下，范圍的結(jié)束值。這個值是可選的，如果不存在，表示此范圍一直延伸到文檔結(jié)束。

了解完 Range 語法之后，我們來看一下實(shí)際的使用示例：

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 范圍請求的相關(guān)知識就先介紹到這里，下面我們步入正題開始介紹如何實(shí)現(xiàn)大文件下載。

二、如何實(shí)現(xiàn)大文件下載

為了讓大家能夠更好地理解后面的內(nèi)容，我們先來看一下整體的流程圖：

了解完大文件下載的流程之后，我們先來定義上述流程中涉及的一些輔助函數(shù)。

2.1 定義輔助函數(shù)

2.1.1 定義 getContentLength 函數(shù)

顧名思義 getContentLength 函數(shù)，用于獲取文件的長度。在該函數(shù)中，我們通過發(fā)送 HEAD 請求，然后從響應(yīng)頭中讀取  Content-Length 的信息，進(jìn)而獲取當(dāng)前 url 對應(yīng)文件的內(nèi)容長度。

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 函數(shù)

在 JavaScript 中如何實(shí)現(xiàn)并發(fā)控制? 這篇文章中，我們介紹了 asyncPool 函數(shù)，它用于實(shí)現(xiàn)異步任務(wù)的并發(fā)控制。該函數(shù)接收 3  個參數(shù)：

• poolLimit(數(shù)字類型)：表示限制的并發(fā)數(shù);

• array(數(shù)組類型)：表示任務(wù)數(shù)組;

• iteratorFn(函數(shù)類型)：表示迭代函數(shù)，用于實(shí)現(xiàn)對每個任務(wù)項(xiàng)進(jìn)行處理，該函數(shù)會返回一個 Promise 對象或異步函數(shù)。

async function asyncPool(poolLimit, array, iteratorFn) {   const ret = []; // 存儲所有的異步任務(wù)   const executing = []; // 存儲正在執(zhí)行的異步任務(wù)   for (const item of array) {     // 調(diào)用iteratorFn函數(shù)創(chuàng)建異步任務(wù)     const p = Promise.resolve().then(() => iteratorFn(item, array));     ret.push(p); // 保存新的異步任務(wù)      // 當(dāng)poolLimit值小于或等于總?cè)蝿?wù)個數(shù)時，進(jìn)行并發(fā)控制     if (poolLimit <= array.length) {       // 當(dāng)任務(wù)完成后，從正在執(zhí)行的任務(wù)數(shù)組中移除已完成的任務(wù)       const e = p.then(() => executing.splice(executing.indexOf(e), 1));       executing.push(e); // 保存正在執(zhí)行的異步任務(wù)       if (executing.length >= poolLimit) {         await Promise.race(executing); // 等待較快的任務(wù)執(zhí)行完成       }     }   }   return Promise.all(ret); }

2.1.3 定義 getBinaryContent 函數(shù)

getBinaryContent 函數(shù)用于根據(jù)傳入的參數(shù)發(fā)起范圍請求，從而下載指定范圍內(nèi)的文件數(shù)據(jù)塊：

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}`); // 請求頭上設(shè)置范圍請求信息       xhr.responseType = "arraybuffer"; // 設(shè)置返回的類型為arraybuffer       xhr.onload = function () {         resolve({           index: i, // 文件塊的索引           buffer: xhr.response, // 范圍請求對應(yīng)的數(shù)據(jù)         });       };       xhr.send();     } catch (err) {       reject(new Error(err));     }   }); }

需要注意的是 ArrayBuffer 對象用來表示通用的、固定長度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū)。我們不能直接操作 ArrayBuffer  的內(nèi)容，而是要通過類型數(shù)組對象或 DataView 對象來操作，它們會將緩沖區(qū)中的數(shù)據(jù)表示為特定的格式，并通過這些格式來讀寫緩沖區(qū)的內(nèi)容。

2.1.4 定義 concatenate 函數(shù)

由于不能直接操作 ArrayBuffer 對象，所以我們需要先把 ArrayBuffer 對象轉(zhuǎn)換為 Uint8Array  對象，然后在執(zhí)行合并操作。以下定義的 concatenate 函數(shù)就是為了合并已下載的文件數(shù)據(jù)塊，具體代碼如下所示：

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 函數(shù)

saveAs 函數(shù)用于實(shí)現(xiàn)客戶端文件保存的功能，這里只是一個簡單的實(shí)現(xiàn)。在實(shí)際項(xiàng)目中，你可以考慮直接使用 FileSaver.js 。

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 函數(shù)中，我們使用了 Blob 和 Object URL。其中 Object URL 是一種偽協(xié)議，允許 Blob 和 File  對象用作圖像，下載二進(jìn)制數(shù)據(jù)鏈接等的 URL 源。在瀏覽器中，我們使用 URL.createObjectURL 方法來創(chuàng)建 Object URL，該方法接收一個  Blob 對象，并為其創(chuàng)建一個唯一的 URL，其形式為 blob:/，對應(yīng)的示例如下：

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

瀏覽器內(nèi)部為每個通過 URL.createObjectURL 生成的 URL 存儲了一個 URL &rarr; Blob 映射。因此，此類 URL 較短，但可以訪問  Blob。生成的 URL 僅在當(dāng)前文檔打開的狀態(tài)下才有效。

好了，Object URL 的相關(guān)內(nèi)容就先介紹到這里，如果你進(jìn)一步了解 Blob 和 Object URL 的話，可以閱讀 你不知道的 Blob  這篇文章。

2.1.6 定義 download 函數(shù)

download 函數(shù)用于實(shí)現(xiàn)下載操作，它支持 3 個參數(shù)：

• url(字符串類型)：預(yù)下載資源的地址;

• chunkSize(數(shù)字類型)：分塊的大小，單位為字節(jié);

• poolLimit(數(shù)字類型)：表示限制的并發(fā)數(shù)。

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 大文件下載使用示例

基于前面定義的輔助函數(shù)，我們就可以輕松地實(shí)現(xiàn)大文件并行下載，具體代碼如下所示：

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("多線程下載結(jié)束: " + +new Date());     saveAs({ buffers, name: "我的壓縮包", mime: "application/zip" });   }); }

由于完整的示例代碼內(nèi)容比較多，阿寶哥就不放具體的代碼了。感興趣的小伙伴，可以訪問以下地址瀏覽示例代碼。

完整的示例代碼：https://gist.github.com/semlinker/837211c039e6311e1e7629e5ee5f0a42

這里我們來看一下大文件下載示例的運(yùn)行結(jié)果：

以上是“JavaScript中實(shí)現(xiàn)大文件并行下載的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！