javascript下使用Promise封裝FileReader_javascript技巧

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 方法。

使用剛才封裝好的函數
接下來就可以在項目中使用了：

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); });

以上就是本文的全部內容，希望對大家的學習有所協助。