理解異步之美：Promise 與 async await（二）
承上啓下
基礎預熱：你好，JavaScript異步編程---- 理解JavaScript異步的美妙前端
理解異步之美：Promise與async await（一）vue
經歷了上一篇基礎的Promise講解後我以爲你們對於promise的基本用法和想法就有必定了解了。（就是一種承諾喲）面試
下面咱們要去了解一下它的工做流程算法
結合源碼與分析別人的常見實現進行理解
下面是別人實現的總源碼，（簡單一看就能夠）vue-router
var PENDING = 0;
var FULFILLED = 1;
var REJECTED = 2;
function Promise(callback) {
this.status = PENDING;
this.value = null;
this.defferd = [];
setTimeout(callback.bind(this, this.resolve.bind(this), this.reject.bind(this)), 0);
}
Promise.prototype = {
constructor: Promise,
resolve: function (result) {
this.status = FULFILLED;
this.value = result;
this.done();
},
reject: function (error) {
this.status = REJECTED;
this.value = error;
},
handle: function (fn) {
if (!fn) {
return;
}
var value = this.value;
var t = this.status;
var p;
if (t == PENDING) {
this.defferd.push(fn);
} else {
if (t == FULFILLED && typeof fn.onfulfiled == 'function') {
p = fn.onfulfiled(value);
}
if (t == REJECTED && typeof fn.onrejected == 'function') {
p = fn.onrejected(value);
}
var promise = fn.promise;
if (promise) {
if (p && p.constructor == Promise) {
p.defferd = promise.defferd;
} else {
p = this;
p.defferd = promise.defferd;
this.done();
}
}
}
},
done: function () {
var status = this.status;
if (status == PENDING) {
return;
}
var defferd = this.defferd;
for (var i = 0; i < defferd.length; i++) {
this.handle(defferd[i]);
}
},
then: function (success, fail) {
var o = {
onfulfiled: success,
onrejected: fail
};
var status = this.status;
o.promise = new this.constructor(function () {});
if (status == PENDING) {
this.defferd.push(o);
} else if (status == FULFILLED || status == REJECTED) {
this.handle(o);
}
return o.promise;
}
};
複製代碼
這是網上一份常見的Promise的源碼實現我會對這個進行一個分析 （確定有人問爲何不本身實現一個？ 解：省時、網上太多了、本質仍是要了解思想）編程
話很少說開始咯
我們先大致梳理一下實現的東西要能幹什麼？
first ：設計模式
let promsie = new Promise((resolve,reject)=>{
doSomething()
})
根據這個構造函數，咱們須要實現兩個方法，resolve、reject方法。
複製代碼
second :數組
promise.then(res=>{
doSomethingRes();
},rej=>{
doSomenthingRej()
})
咱們要實現一個then方法，能夠去根據不一樣狀態來執行不一樣的函數。
複製代碼
最基本的兩個內容咱們已經肯定了。promise
話很少說開始分析代碼。異步
對代碼的分析在內容的註釋上你們不要遺漏哈！！！
第一段構造函數與狀態設定
// 首先聲明三個狀態，
// 狀態的就是上一節說的：事情是進行中、已完成、失敗了。
// 這三種狀態遵循着PENDING->FULEFILLED 或者PENDING->REJECTED
var PENDING = 0;
var FULFILLED = 1;
var REJECTED = 2;
// Promise構造函數接收u一個回調函數
function Promise(callback) {
// 新new出來的實例的status必定是PENDING.
this.status = PENDING;
// value是指當你事情完成、失敗後內部保存的值
// 用法是resolve（42） 在then函數的res=>{dosomething（）res就是42
}
this.value = null;
// defferd 字面意思推遲、是個數組，存放這個promise之後要執行的事件
// 類比發佈訂閱模式（觀察者模式）。存放觀察者在被觀察者身上訂閱的事件列表
// defferd內的事件存放着往後觀察者要執行的事件。
this.defferd = [];
// setTimeout異步的去執行new 一個promise實例內執行的任務，不去阻塞主線程。
//這一段代碼我有一點疑惑,new promise實例時，callback的執行並非異步的。
// 而這裏選擇異步的並非很合理。
// bind函數的做用。callback的參數如何指定？經過bind方法將函數函數柯里化（Currying 和一個NBA球星的名字同樣很好記）
// 並且綁定函數的this執行。函數內的this都執行這個new 出來的promise實例
// 去指定函數執行時的參數，將resolve方法與reject方法強制作爲callback的參數。
// 因此咱們寫的回調函數，參數怎麼命名均可以執行到對應的resolve與reject方法
setTimeout(callback.bind(this, this.resolve.bind(this), this.reject.bind(this)), 0);
}
複製代碼
本身實現與官方Promise執行的對比。你們能夠看一下這個setTimeout致使的執行順序問題。因此閱讀別人對各類功能實現時要學會對照的去看。
到這裏夥伴們已經瞭解了咱們new 一個構造函數時都會作哪些事情。
1:對promise實例定義一個狀態，值爲PENDING。
2:給promise實例定義一個存放值的空間。
3:設置一個發佈列表，在之後的指定時間發佈其中的事件。
4:經過bind函數將callback柯里化，使callback執行時調用對應的resolve與reject方法，並執行callback
第二段 resolve reject then方法的分析
爲何先說這三個方法。 由於resolve、reject是核心方法，不說都不行，但是resolve與reject完成要作的事情必須是then方法指定的因此三個方法之間關係密切。
// 在Promise的原型對象上指定這些方法。
// 這種作法有很大弊端、而且Promise源碼也並非這麼作的以後會進行分析
Promise.prototype = {
// 覆蓋式的指定Promise的原型對象會致使constructor屬性丟失
// 在這裏進行填補，手動指定Promise原型對象上的constructor屬性
constructor: Promise,
// resolve方法開始 接收一個結果（能夠爲空）
resolve: function (result) {
//更改狀態爲FULFILLED。
this.status = FULFILLED;
// 將result存放在以前構造函數中提到的存放結果的空間中
this.value = result;
// done方法。表示執行完畢（後面會繼續將）
this.done();
},
// 與resolve方法相似 很少作解釋
reject: function (error) {
// 狀態更改
this.status = REJECTED;
this.value = error;
// 沒有done函數，這塊作法頗有問題下面會配圖解釋。
},
// then方法開始要好好講講
// success表示狀態變成FULFILLED時要執行的函數
// fail表示狀態變成REJECTED時要執行的函數
then: function (success, fail) {
// 聲明一個對象來存放這些事件。
var o = {
onfulfiled: success,
onrejected: fail
};
// 獲取當前promise的狀態。
// 這個的意義是，咱們對promise實例執行then方法的時候有兩種狀況
// 一：promise實例的內容尚未執行完畢。二：promise實例內容已經執行完畢而且狀態已經改變。繼續下面。
var status = this.status;
o.promise = new this.constructor(function () {});
// 若是狀態是PENDING，表示實例內容還未執行完畢。
// 說明then方法指定在某種狀態要執行的事件是將來發生的如今並不執行。
// 因此將o放入defferd訂閱列表中。
// 這個以前講過defferd中的內容會在某個條件觸發後會執行。
// 因此當promise實例內容還未完成就要把將來執行的方法放入訂閱列表
if (status == PENDING) {
this.defferd.push(o);
// 對應以前說的狀況二
// 狀態變成如下兩種狀況怎麼辦？
// 訂閱列表內不該該有當前狀況的o。
// 因此要當即執行當前指定的事件，並且將來的任何狀況下此次指定的事件也不會執行。
//因此不會放入defferd中
} else if (status == FULFILLED || status == REJECTED) {
// 執行handle函數
this.handle(o);
}
// then方法存在鏈式調用，then方法的返回值必須是一個promise對象
return o.promise;
}
};
複製代碼
到這裏咱們大致梳理清楚，resolve、reject、then方法的用處。
提一嘴 reject方法沒有執行done函數會致使如下狀況
一：在new promise實例過程當中執行的callback函數，在函數執行的過程當中確定會調用resolve或者reject（兩個都調用也可能）。當調用了resolve方法以後會改變promise的狀態，存放結果。表示任務完成，執行done函數。（reject就再也不來一遍了）
二：then方法的執行事件與resolve方法沒有任何前後順序可言。爲所欲爲誰在前面都不必定。在resolve（reject）以前執行，就註冊一下要執行的事件。在resolve（reject）以後執行就直接執行就能夠了，而且不要註冊。
第三段 具體是怎麼執行的呢？聊聊done與handle
同窗們按照代碼執行的順序，咱們應該先去看done方法。而後再看handle因此辛苦一下，先向下一點找到可愛的done方法。
// 看完done方法的朋友確定對我這種方式很鬧心，保證大家看的熱情嘛。哈哈哈哈哈
// 沒看done方法的快回去看、快回去看。
// 必須提一下 下面一直說的o是什麼？ o是在then方法中傳入defferd數組中的對象，一下簡稱爲o。
// handle是幹嗎的？？？ 那是用來執行o的。o裏面放着咱們想要執行的內容
// 你們再回憶如下，handle還在哪裏執行了？想起來了吧，當then方法執行時
// 若是狀態已經改變了。那麼就直接handle（o），執行你要作的事情。
handle: function (fn) {
// o不存在的？？？媽耶，咋辦呀。那就是defferd中沒東西。好吧什麼都不作
if (!fn) {
return;
}
var value = this.value;
var t = this.status;
var p;
// 若是狀態爲PENDING，表示還沒到o要執行的內容。那麼不能執行的？
if (t == PENDING) {
this.defferd.push(fn);
} else {
// 這裏面很容易看的，狀態變成FULFILLED，
//而且你在給狀態是FULFILLED時要作的事情能夠執行（函數才能執行呀，你寫個字符串不報錯了？？）
// 執行咯。這裏面你們一看就知道，你then方法裏面res=>{doSometthing(res)}
//這個res就是promise內存放的結果（value）。
if (t == FULFILLED && typeof fn.onfulfiled == 'function') {
p = fn.onfulfiled(value);
}
// 很少提了。
if (t == REJECTED && typeof fn.onrejected == 'function') {
p = fn.onrejected(value);
}
// 可是這個p是幹什麼的？？？？
// 存放方法的返回值，爲了鏈式調用。實現鏈式調用的是什麼方法？
// 返回的o.promise. 那麼返回的o.promise不存在呢？（固然這是不可能的）
// 那就沒有鏈式調用。
// promise中有一個方法，當then函數內的事件（指的這個函數：res=>{}）
// 返回值是一個promise對象時，那麼then的返回值就是這個promise對象
// 鏈式中的下一個then就會等待這個promise執行完畢。
// 若是不是promise對象怎麼辦？那麼就執行鏈條後面的then方法註冊的事情。
var promise = fn.promise;
if (promise) {
// 若是你註冊的事件執行後的返回值是一個promise對象
if (p && p.constructor == Promise) {
// 當前這個p（是個promise對象）能夠把o.promise對象訂閱列表內的事件拿過來。
// 串行後，返回的promise繼續控制着defferd的內容。
//理論上講,按剛纔的邏輯來寫，每一個promise對象內的defferd，都應該只有一個值。
// 由於串行的鏈條每一個then註冊的事件都在上一個then返回的o.promise的defferd內。
// 那麼爲何？defferd要寫個數組呢？？？這是我疑惑的地方可是影響不大
p.defferd = promise.defferd;
} else {
// 若是不是promise呢？那麼就把當前的promise對象看成你的返回值
// 繼續繼承o.promise裏面的defferd
p = this;
p.defferd = promise.defferd;
// 並無任何承諾，p應該就是一個resolved（reject）狀態
// 直接執行done方法就能夠啦。
this.done();
}
}
}
},
// done方法是在resolve方法（reject爲啥沒寫以前有講過）中執行的，表示resolve方法執行完畢了。
// 這個完畢是一種明確信號，那就是以前說好的狀態變成FULFILLED我要作的那些事情。
// 鄉親們、弟兄們我們能夠被執行了
done: function () {
// 固然爲了保險起見PENDING狀態確定不會執行，return掉。
// done函數在PENDING狀態也不會被調用呀。雙重保險嘛
var status = this.status;
if (status == PENDING) {
return;
}
// 鄉親們、兄弟們在哪呢？就在你的defferd中。咱們的訂閱列表內的兄弟們該執行了。
// 遍歷如下咱們的defferd對象，誰也別漏下都給我執行了。
var defferd = this.defferd;
for (var i = 0; i < defferd.length; i++) {
// 問題來了鄉親們不是函數是一個對象啊。
//爲啥是對象？在then方法中有defferd.push(o);o是啥？是個對象啊。
// 那咋執行？？？？須要一個特定來執行o的方法，就是handle。
// 好了夥伴們能夠把文章回到上面一點了。
this.handle(defferd[i]);
}
},
複製代碼
這一段我已經把handle與done方法說完了。主要是爲了鏈式調用。纔會設計的這樣子。因此鏈式調用仍是很搶手的一個功能。 本身也能夠嘗試的去實現一下符合promise規範的promise功能。
親！ 學習完要思考
不知道看到這裏你們對網上常見的promise源碼實現有一種什麼樣的感受？？？
我先說說個人感受
看過源碼（抱歉個人智商是在有限，短期內是真的看不懂啊），以爲源碼作的要合理太多了。看不懂我都以爲合理。。。。不是對強者的過度崇拜，而是真的很合理。網上常見的實現，只是單單的實現了功能，這樣的promise只適合有必定promise經驗而且守規矩的人使用。爲何這麼說？？？
一：這樣實現的promise，狀態能夠隨時人爲的更改，對外暴露，沒有設置爲私有屬性。
二：爲了方便，選擇把方法設置在原型鏈上，致使沒法使用私用變量。
三：reject的執行不足，只是對resolve進行合理的使用。
雖然我這麼說，我也實現不出來，寫出這些的人仍是比我厲害不少
promise的源碼則是（某個版本的，版本號我不記得了）
把resolve、reject、all、race，handle方法，都放在構造函數內。
把catch、then、chain方法放在原型上。
對比源碼以後，以爲本身雖然流程大致瞭解，可是這種精密並且優雅的方式，是短期內很難去掌握的。promise的源碼固然會堅持看下去，網上能把promise按照規範實現一遍的人已經很厲害了。我雖然以爲還有地方能夠修改，可是我比他們還差的遠（這種感受就有點像：我不上，我就比比），要向他們學習，照這他們去努力。
別說了 喝雞湯吧
前端的學習之路還很漫長，我看過的（僅僅是看過的）源碼半隻手就都數的過來。仍是堅信堅持下去，本身就變得很棒。每一個人都是從控制流語句學過來的，邏輯也不過是複雜的控制流程（還涉及高端的算法與設計模式），堅信本身必定能夠成功！！！一塊兒努力吧 每個前端er（boy and girl）。因此一切源碼層面看不懂、不理解均可以歸結爲看得少、想得少、理解的少。（和你的智商沒有任何關係喲）
下期預告
下一篇就是理解異步之美的終點篇了。異步的美好在於這種神奇的思想。抓住思想的尾巴，不被技術束縛，嘿嘿嘿。
要開新課題了。課題應該是圍繞着vue-router的源碼進行學習。一個與你們分享學習過程的週期性文章。盡情期待！！！
我是一個應屆生，最近和朋友們維護了一個公衆號，內容是咱們在從應屆生過渡到開發這一路所踩過的坑，已經咱們一步步學習的記錄，若是感興趣的朋友能夠關注一下，一同加油~
相關文章
- 1. [完結篇] - 理解異步之美 --- promise與async await （三）
- 2. 理解異步之美：Promise與async await（一）
- 3. 理解異步之美--- Promise與async await（一）
- 4. 異步處理promise、async、await
- 5. 異步-promise、async、await
- 6. async/await與promise 異步解決方案
- 7. JS 異步(callback→Promise→async/await)
- 8. 循環與異步操做(Promise/async/await)
- 9. JS異步之callback、promise、async+await簡介
- 10. es6 之promise/async/await 異步操做
- 更多相關文章...
- • Scala 異常處理 - Scala教程
- • C# 異常處理 - C#教程
- • Java Agent入門實戰（三）-JVM Attach原理與使用
- • Docker 清理命令
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. [完結篇] - 理解異步之美 --- promise與async await （三）
- 2. 理解異步之美：Promise與async await（一）
- 3. 理解異步之美--- Promise與async await（一）
- 4. 異步處理promise、async、await
- 5. 異步-promise、async、await
- 6. async/await與promise 異步解決方案
- 7. JS 異步(callback→Promise→async/await)
- 8. 循環與異步操做(Promise/async/await)
- 9. JS異步之callback、promise、async+await簡介
- 10. es6 之promise/async/await 異步操做