成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用 Promise 封裝 FileReader

zhongmeizhi / 1807人閱讀

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

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

Promise 的 N 種用法

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 對象
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 對象
p.then(function (num) {
  // 對應(yīng)上面的 resolve
  console.log(num); // 1
}, function (num) {
  // 對應(yīng)上面的 reject
  console.log(num); // 2
});

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

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

封裝 FileReader

接下來開始封裝。思路很簡單，FileReader 除了提供各種 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);
    }
  });
}

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

Github Gist 里也放了一份。

使用剛才封裝好的函數(shù)

接下來就可以在項(xiàng)目中使用了：

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

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

繼續(xù) .then()

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

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);
  });
總結(jié)

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

參考文獻(xiàn)

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

ECMAScript 6 入門：Promise 對象

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78676.html

相關(guān)文章

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

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

    helloworldcoding 評論0 收藏0

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

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

    LiuRhoRamen 評論0 收藏0

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

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

    Zachary 評論0 收藏0

  • web worker 的傳值方式以及耗時(shí)對比

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

    warkiz 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<