使用 Promise 封裝 FileReader

zhongmeizhi 發布于2019-08-19 17:36 / 1804人閱讀

摘要：將其加入規范，也修改實現向規范靠攏發布公告。封裝接下來開始封裝。使用剛才封裝好的函數接下來就可以在項目中使用了支持兩個參數，第一個在成功時啟動，第二個自然在失敗時啟動。

我近期在 SF 做了一場關于 Promise 的專題分享，做的很用心，內容也很豐富，基本可以一站式解決所有關于 Promise 的問題。歡迎大家前來圍觀：

Promise 的 N 種用法

Promise 在處理異步的時候是個很好的選擇，可以減少嵌套層次，讓代碼更好讀，邏輯更清晰。ES6 將其加入規范，jQuery 3.0 也修改實現向規范靠攏（3.0 發布公告）。一些新增元素比如 .fetch() 原生就 “thenable”，不過大多數以往的 API 還要依賴回調，這個時候，我們只要將它們重新封裝，就能避開嵌套陷阱，享受 Promise 帶來的愉悅體驗。

Promise 一般用法

先來看下 Promise 的一般用法。

// 聲明 Promise 對象
var p = new Promise(function (resolve, reject) {
  // 不管啥時候，該執行then了，就調用 resolve
  setTimeout(function () { 
    resolve(1);
  }, 5000);

  // 或者不管啥問題，就調用 reject
  if (somethingWrong) {
    reject("2");
  }      
});
    
// 使用 Promise 對象
p.then(function (num) {
  // 對應上面的 resolve
  console.log(num); // 1
}, function (num) {
  // 對應上面的 reject
  console.log(num); // 2
});

Promise 的驅動模型并不復雜：任何操作，假定它只有兩個結果，成功或者失敗。那么只需要在合適的時間調用合適的程序，進入合適的后續步驟即可。.then() 顧名思義，就是下一步的意思，當前面的 Promise 有了結果——即調用 resolve 或者 reject——之后，就啟動對應的處理函數。

Promise 實例創建后就會開始執行，判定結果需要我們自己來，比如加載成功，或者滿足某個條件，等等。通過串聯 .then() 則可以完成一系列操作。每次調用 .then() 都會創建一個新的 Promise 實例，它會靜靜等待前面的實例狀態改變后再開始執行。

封裝 FileReader

接下來開始封裝。思路很簡單，FileReader 除了提供各種 read 方法，還有幾個事件鉤子，其中 onerror 和 onload 很明顯可以作為判斷任務是否完成的依據。加載成功的話，就需要用到文件內容，所以將文件或文件內容傳遞到下一步也十分必要。

最后完成的代碼如下：

function reader (file, options) {
  options = options || {};
  return new Promise(function (resolve, reject) {
    let reader = new FileReader();

    reader.onload = function () {
      resolve(reader);
    };
    reader.onerror = reject;

    if (options.accept && !new RegExp(options.accept).test(file.type)) {
      reject({
        code: 1,
        msg: "wrong file type"
      });
    }

    if (!file.type || /^text//i.test(file.type)) {
      reader.readAsText(file);
    } else {
      reader.readAsDataURL(file);
    }
  });
}

為了能真正派上用場，里面還有一些驗證文件類型的操作，不過跟本文主旨無關，略過不表。這段代碼的核心是創建一個 Promise 對象，等待 FileReader 讀取完成后調用 resolve 方法，或者出現問題時調用 reject 方法。

Github Gist 里也放了一份。

使用剛才封裝好的函數

接下來就可以在項目中使用了：

reader(file)
  .then(function (reader) {
    console.log(reader.result);
  })
  .catch(function (error) {
    console.log(error);
  });

.then() 支持兩個參數，第一個在 Promise 成功時啟動，第二個自然在失敗時啟動。用 .catch() 可以實現同樣地效果。Promise 的好處除了可讀性更佳以外，返回的 Promise 對象還可以任意傳遞，繼續進行鏈式調用，有很大想象空間。

繼續 .then()

于是我們不妨串聯更多操作（本來想寫個斷點續傳的，回頭再說吧）：

reader(file)
  .then(function (reader) {
    return new Promise(function (resolve, reject) {
      // 就隨便暫停個5秒吧……
      setTimeout(function () {
        resolve(reader.result); 
      }, 5000);
    });
  })
  .then(function (content) {
    console.log(content);
  });

總結

這其實是我第一次用 Promise，上次翻譯 jQuery 發布公告的時候我它也只是一知半解，對它的解讀也糊里糊涂。我很喜歡在業余項目中學習使用新技術，最近開發 Chrome 插件的時候就嘗試了一把，感覺不錯。使用過程比我想象的復雜也比我想象的簡單，這套設計很棒，能解決不少實際問題，也給了我很大啟發，將來我應該會把很多地方的實現都做這樣的修改。

參考文獻

除去第一段的各個鏈接，還有一些文章值得一看。

ECMAScript 6 入門：Promise 對象

云服務器 GPU云服務器 Promise封裝FileReader Promise使用 FileReader FileReader分布讀取

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78676.html

你知道前端對圖片的處理方式嗎？

摘要：對于第二種存儲方式，我們前端需要將其二進制流交由對象處理，然后通過的生成臨時賦值給屬性來顯示。當后端返回特定的圖片二進制流的時候，就像我第一里的情景再現說的，前端用容器接收。前言作為前端工程師 de 我們，日常少不了會跟圖片打交道。在各大電商平臺工作的前端工程師們，感受可能會更加的明顯。以下是我之前跟圖片打交道踩到的坑，跟大家分享一下經驗。一、情景再現用postman請求接口...

helloworldcoding 2019-08-23 15:28 評論0 收藏0
你知道前端對圖片的處理方式嗎？

摘要：對于第二種存儲方式，我們前端需要將其二進制流交由對象處理，然后通過的生成臨時賦值給屬性來顯示。當后端返回特定的圖片二進制流的時候，就像我第一里的情景再現說的，前端用容器接收。前言作為前端工程師 de 我們，日常少不了會跟圖片打交道。在各大電商平臺工作的前端工程師們，感受可能會更加的明顯。以下是我之前跟圖片打交道踩到的坑，跟大家分享一下經驗。一、情景再現用postman請求接口...

LiuRhoRamen 2019-08-30 15:55 評論0 收藏0
你知道前端對圖片的處理方式嗎？

摘要：對于第二種存儲方式，我們前端需要將其二進制流交由對象處理，然后通過的生成臨時賦值給屬性來顯示。當后端返回特定的圖片二進制流的時候，就像我第一里的情景再現說的，前端用容器接收。前言作為前端工程師 de 我們，日常少不了會跟圖片打交道。在各大電商平臺工作的前端工程師們，感受可能會更加的明顯。以下是我之前跟圖片打交道踩到的坑，跟大家分享一下經驗。一、情景再現用postman請求接口...

Zachary 2019-08-02 14:20 評論0 收藏0
web worker 的傳值方式以及耗時對比

摘要：背景前一陣子開發的項目導入由于自己的代碼問題引起了個性能問題一個的文件轉換成數據大概要耗時雖然后面發現是某個使用頻率非常高的函數內部用了構造函數造成的所以這里順便提醒一下如果你很在乎幾毫秒的差距的話建議謹慎使用哈但是在優化的過程中一度懷疑是背景前一陣子開發的項目 pptx 導入, 由于自己的代碼問題,引起了個性能問題,一個 40p 的 pptx 文件,轉換成 json 數據,大概要...

warkiz 2019-08-23 15:06 評論0 收藏0