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); });
以上就是本文的全部內容,希望對大家的學習有所幫助。