原生js實現Promise(簡版 公升級版)

2022-03-11 04:42:59 字數 3861 閱讀 2864

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...