您好,登錄后才能下訂單哦!
這篇文章主要介紹如何實現(xiàn)一個簡易promise,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
1. 首先我們需要在這里放置一個promise函數(shù)本體 后面要在里面添加resolve、reject的執(zhí)行函數(shù)
function Promise(execotor) {}
2. 原裝promise中有then與catch這兩個主要的方法,所以我們要給promise的原型掛載then與catch
Promise.prototype.then = function (onResolved, onRejected) {} Promise.prototype.catch = function (onRejected) {}
3. 給promise掛載幾個常見方法 resolve、reject、all、race等等
resolve:返回的是一個指定結(jié)果的promise對象
Promise.resolve = function (value) { }
reject:返回失敗狀態(tài)的方法
Promise.reject = function (value) { }
all:返回一個promise對象,只有當(dāng)promise都返回的時候,這個狀態(tài)才算成功
Promise.all = function (value) { }
race:返回一個promise對象,它的狀態(tài)是由第一個返回的對象確定的,這個race里面哪個函數(shù)先執(zhí)行完,就直接返回第一個值,其他的繼續(xù)執(zhí)行
Promise.race = function (value) { }
4. 全局聲明mypromise
window.Promise = Promise
5. 建立一個自執(zhí)行函數(shù) 將上述內(nèi)容全部包裹進去
(function (window) { })()
1.填充function Promise()
(1)let self = this固定一個function內(nèi)部的this,這個this在后面會發(fā)揮很大作用
(2)self.status = 'pending'為Promise函數(shù)本體添加一個基礎(chǔ)狀態(tài)‘pending'
(3)self.data = undefined建立一個data源,用來存儲resolve傳回來的結(jié)果
(4)self.callbacks = []建立一個數(shù)組,用來將promise中的回調(diào)全部保存起來
2.填充function resolve()
(1) if (self.status !== 'pending') { return }判斷當(dāng)前傳入進程的狀態(tài)是否為pending,是就繼續(xù)下面的操作,不是就直接返回
promise內(nèi)部有三種狀態(tài)pending、resolved、rejected,這三種狀態(tài)都是一種開關(guān)變量,如果該狀態(tài)從pending轉(zhuǎn)為其他狀態(tài)后將無法改變。
(2)self.status = 'resolved'將該進程的狀態(tài)改為resolved
(3)self.data = value將value存起來,待會then中的回調(diào)會需要使用該數(shù)據(jù)
(4)放上最重要的執(zhí)行函數(shù)部分,如果sele.data中有待執(zhí)行的callback函數(shù),立即異步執(zhí)行它
if (self.callbacks.length > 0) { setTimeout(() => { self.callbacks.forEach(callbackObj => { callbackObj.onResolved(value) }) }, 0) }
3.填充function reject()
(1) 與resolve函數(shù)相同,此處簡略
4.填充execotor方法
promise主體在執(zhí)行時如果出錯,錯誤信息被catch捕捉,此時catch會跳至該函數(shù)來單獨執(zhí)行一個reject
try { execotor(resolve, reject) } catch (error) { reject(error) }
5.填充.then函數(shù)
首先我們要區(qū)分傳入進程的狀態(tài),如果是pending狀態(tài)就把回調(diào)函數(shù)存起來,如果不是pending狀態(tài)就干點什么它應(yīng)該做的
(1)if (self.status === 'pending')如果當(dāng)前的狀態(tài)是pending的話,我們就把它保存起來
self.callbacks.push({ onResolved() { onResolved(self.data) }, onRejected() { onRejected(self.data) } })
(2)else if (self.status === 'resolved')如果status的狀態(tài)是resolved
我們就開開心心的給它執(zhí)行一下
setTimeout(() => { onResolved(self.data) }, 0)
可是有這么一種狀態(tài):resolve沒有執(zhí)行,但此時狀態(tài)卻已經(jīng)改變了,我們就不能執(zhí)行resolve而改為執(zhí)行rejected
else{ setTimeout(() => { onRejecyed(self.data) }, 0) }
經(jīng)過了如同怎么把大象塞進冰箱一樣“簡略”的兩步,我們就實現(xiàn)了一個簡易的Promise
以上是“如何實現(xiàn)一個簡易promise”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。