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

Promise 一般用法
先來看下 Promise 的一般用法。

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

 // 或者不管啥問題，就調(diào)用 reject
 if (somethingWrong) {
  reject('2');
 }   
});
  
// 使用 Promise 對(duì)象
p.then(function (num) {
 // 對(duì)應(yīng)上面的 resolve
 console.log(num); // 1
}, function (num) {
 // 對(duì)應(yīng)上面的 reject
 console.log(num); // 2
});

Promise 的驅(qū)動(dòng)模型并不復(fù)雜：任何操作，假定它只有兩個(gè)結(jié)果，成功或者失敗。那么只需要在合適的時(shí)間調(diào)用合適的程序，進(jìn)入合適的后續(xù)步驟即可。.then() 顧名思義，就是下一步的意思，當(dāng)前面的 Promise 有了結(jié)果——即調(diào)用 resolve 或者 reject——之后，就啟動(dòng)對(duì)應(yīng)的處理函數(shù)。

Promise 實(shí)例創(chuàng)建后就會(huì)開始執(zhí)行，判定結(jié)果需要我們自己來，比如加載成功，或者滿足某個(gè)條件，等等。通過串聯(lián) .then() 則可以完成一系列操作。每次調(diào)用 .then() 都會(huì)創(chuàng)建一個(gè)新的 Promise 實(shí)例，它會(huì)靜靜等待前面的實(shí)例狀態(tài)改變后再開始執(zhí)行。

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

最后完成的代碼如下：

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

為了能真正派上用場(chǎng)，里面還有一些驗(yàn)證文件類型的操作，不過跟本文主旨無關(guān)，略過不表。這段代碼的核心是創(chuàng)建一個(gè) Promise 對(duì)象，等待 FileReader 讀取完成后調(diào)用 resolve 方法，或者出現(xiàn)問題時(shí)調(diào)用 reject 方法。

使用剛才封裝好的函數(shù)
接下來就可以在項(xiàng)目中使用了：

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

.then() 支持兩個(gè)參數(shù)，第一個(gè)在 Promise 成功時(shí)啟動(dòng)，第二個(gè)自然在失敗時(shí)啟動(dòng)。用 .catch() 可以實(shí)現(xiàn)同樣地效果。Promise 的好處除了可讀性更佳以外，返回的 Promise 對(duì)象還可以任意傳遞，繼續(xù)進(jìn)行鏈?zhǔn)秸{(diào)用，有很大想象空間。

繼續(xù) .then()
于是我們不妨串聯(lián)更多操作（本來想寫個(gè)斷點(diǎn)續(xù)傳的，回頭再說吧）：

全選復(fù)制放進(jìn)筆記reader(file)

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

最新評(píng)論