国产亚洲精品禁,色综合热无码热国产,久久综合九九亚洲一区_福利

    <tbody id="btdec"><noscript id="btdec"></noscript></tbody>
      <em id="btdec"><acronym id="btdec"><input id="btdec"></input></acronym></em>
    1. <dd id="btdec"><track id="btdec"></track></dd>
      <s id="btdec"><object id="btdec"></object></s>
      <span id="btdec"></span>

      JavaScript 中如何實現大文件并行下載?

      來源:掘金
      2021-04-28
      17031
      導語:分析了 async-pool 這個庫如何利用 Promise.all 和 Promise.race 函數實現異步任務的并發控制。本文阿寶哥將介紹如何利用 async-pool 這個庫提供的 asyncPool 函數來實現大文件的并行下載。
      閱讀本文大概需要5分鐘

      JavaScript 中如何實現并發控制? 這篇文章中,阿寶哥詳細分析了 async-pool 這個庫如何利用 Promise.allPromise.race 函數實現異步任務的并發控制。本文阿寶哥將介紹如何利用 async-pool 這個庫提供的 asyncPool 函數來實現大文件的并行下載。

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

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

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

      關注「全棧修仙之路」閱讀阿寶哥原創的 4 本免費電子書(累計下載 3萬+)及 11 篇 Vue 3 進階系列教程。

      一、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 語法之后,我們來看一下實際的使用示例:

      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.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…

      這里我們來看一下大文件下載示例的運行結果:

      三、總結

      本文介紹了在 JavaScript 中如何利用 async-pool 這個庫提供的 asyncPool 函數,來實現大文件的并行下載。除了介紹 asyncPool 函數之外,阿寶哥還介紹了如何通過 HEAD 請求獲取文件大小、如何發起 HTTP 范圍請求及在客戶端如何保存文件等相關知識。其實利用 asyncPool 函數不僅可以實現大文件的并行下載,而且還可以實現大文件的并行上傳,感興趣的小伙伴可以自行嘗試一下。



      相關標簽
      免費獲取專屬 《策劃方案 》及報價
      免費體驗我們的業務系統、OA系統、在線教育、電商系統、智慧辦公等產品定制化方案,助力您的信息化發展之路
      即時交流
      在線咨詢 電話咨詢
      在線咨詢
      產品經理

      一對一產品經理

      180 8812 7777
      電話咨詢

      電話咨詢

      0871-6718 6978
      到訪面聊
      返回頂部
      国产亚洲精品禁,色综合热无码热国产,久久综合九九亚洲一区_福利