js 實現 promise
***************
之前查閱了幾篇blog作為參考,最終參考了:
mdn語法的理解
------------------
var executor = function(resolve, reject)
new promise(executor);
- promise建構函式 接收的乙個executor函式
- executor函式 接收兩個引數(resolve, reject):resolve 被作為成功函式來對待使用,reject 被作為失敗函式來對待使用;
- resolve函式 被呼叫時,promise的狀態改為`fulfilled`,reject函式被呼叫時,promise狀態改為`rejected`
- promise 在接收到executor函式時,將會 ```立即執行```executor函式,並且發生在promise返回promise例項之前被呼叫
- executor執行過程中,成功邏輯呼叫resoleve函式;失敗邏輯呼叫reject函式;如果發生異常,promise的狀態將是`rejected`
- executor函式的返回值將被忽略。
mdn描述的理解
---------------
- promsie 具有3種狀態,除了上面提到的`fulfilled`和`rejected`兩種,還有乙個種:`pending`(初始狀態,不代表成功,也不代表失敗狀態)
- promise.prototype.then(onfulfilled, onrejected) 接收兩個**函式;最終返回promise物件,傳遞了原有的status
- promise.prototype.catch() 最終也是返回promise物件
- 綜上,promise可以被鏈式呼叫
mdn的方法
-----------
- promise.all(iterable)
- promise.race(iterable)
- promise.reject(reason)
- promise.resolve(value) value具有三種型別,需要特殊對待
mdn的原型 - 方法
------------
- promise.prototype.catch(onrejcted)
- promise.prototype.then(onfulfilled, onrejected)
- promise.prototype.finally(onfinally)
回歸主題 js 實現promise
********************====
此次僅實現了
- promsie.prototype.constructor
- promise.prototype.then(onresolve, onreject)
- promise.reject(onreject)
- promsie.resolve(value) 未實現value包含`then:function`的特性
簡版實現思維
---------
用到了佇列 和 閉包。 **實現在 [js-promise.html](js-promise.html)
這個思路受到blog的啟發,基於blog的思路,實現了更為貼切原生promise的功能
function(executor) ;
const reject = (val) =>;
try catch
(error)
}fnpromise.prototype.then = function
(onresolve, onreject)
驗證 簡版
-------------
通過與原生promise的使用對比,直接resolve
```
/*最簡單的成功**
*/var p1 = new promise(resolve => resolve(200));
p1.then(res => console.log('p1 最簡單的成功**: ', res))
/*promise.then()返回promise物件,並保留resolve狀態
*/.then(a => console.log('p1 必須出現'), b => console.log('p1 不會出現'));
/*最簡單的成功**
*/var fp1 = new promise(resolve => resolve(200));
fp1.then(res => console.log('fp1 最簡單的成功**: ', res))
/*promise.then()返回promise物件,並保留resolve狀態
*/.then(a => console.log('fp1 必須出現'), b => console.log('fp1 不會出現'));
```通過與原生promise的使用對比,使用settimeout() 非同步 resolve
```
/*非同步**
*/var sync_p = new promise(resolve => settimeout(resolve, math.random() * 4000, 304));
sync_p
.then(res => console.log('sync_p 非同步**: ', res))
/*非同步**的.then() 返回同樣狀態的promise
*/.then(a => console.log('sync_p 必須成功'), b => console.log('sync_p 不可能出現'));
/*非同步**
*/var sync_fp = new promise(resolve => settimeout(resolve, math.random() * 5000, 304));
sync_fp
.then(res => console.log('sync_fp 非同步**: ', res))
/*非同步**的.then() 返回同樣狀態的promise
*/.then(a => console.log('sync_fp 必須成功'), b => console.log('sync_fp 不可能出現'));
```公升級版本疑問
-----------------
簡版promise 無法實現一下原生效果。
```
var b = 10;var p1 = new promise(resolve =>, 1000 * 10);
});p1
.then(() =>)
.then((res) =>, 1000 * 2);
});})
.then(() =>, 1000 * 2);
});})
.then(
() => console.log(' 應該是最後一次輸出0: ', b),
() => console.log(' 不應該出現異常')
);
```公升級版思維
-------------
沿用簡版的佇列、閉包思維,增加了遞迴(用來修訂佇列中的fnpromise的執行關係)
**實現在 [js-promise-plug.html](js-promise-plus.html)
已經親自驗證了 公升級版的疑問效果。
ps:
思考方案 -> blog論證 -> 簡版(coding、**驗證、邏輯推敲、**驗證、邏輯推敲) -> 公升級版(coding、**驗證、邏輯推敲、**驗證、邏輯推敲...) -> 腦仁疼了2、3天
promise應用及原生實現promise模型
一 先看乙個應用場景 傳送乙個請求獲得使用者id,然後根據所獲得的使用者id去執行另外處理。當然這裡我們完全可以使用 即在請求成功之後執行callback 但是如果又新增需求呢?比如獲得使用者id之後,再傳送請求去獲取使用者名稱,之後再獲取使用者其他資訊。這就陷入了callback hell,而且 ...
實現簡版 call
在學習 this 指向時,我們知道如果乙個函式作為物件的方法執行時,this 指向這個物件 那麼實現 call 可以參考這個思路 1.在物件上新增函式 2.執行物件方法 3.刪除為了改變 this 而在物件上新增的函式 實現如下 1 這裡要用 function 不能用箭頭函式,要通過 this 獲取...
原生 js 實現面對物件版瀑布流
寫 之前大概列了一下需求,然後中間又加上了一些其他功能,最終的需求如下 完整 頁面預覽 起乙個自執行函式,只需要暴露乙個 falls 變數,該變數指向乙個包含 init 方法的物件 init 方法有2個引數 el 瀑布流的容器的選擇符 options 其他引數ps 這裡還用到了乙個自定義的 exte...