怎麼去實現一個簡潔版的promise?
// 三個常量用於表示狀態
const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'
function MyPromise(fn) {
const that = this
this.state = PENDING
// value 變量用於保存 resolve 或者 reject 中傳入的值
this.value = null
// 用於保存 then 中的回調,因爲當執行完 Promise 時狀態可能還是等待中,這時候應該把 then 中的回調保存起來用於狀態改變時使用
that.resolvedCallbacks = []
that.rejectedCallbacks = []
function resolve(value) {
// 首先兩個函數都得判斷當前狀態是否爲等待中
if(that.state === PENDING) {
that.state = RESOLVED
that.value = value
// 遍歷回調數組並執行
that.resolvedCallbacks.map(cb=>cb(that.value))
}
}
function reject(value) {
if(that.state === PENDING) {
that.state = REJECTED
that.value = value
that.rejectedCallbacks.map(cb=>cb(that.value))
}
}
// 完成以上兩個函數以後,我們就該實現如何執行 Promise 中傳入的函數了
try {
fn(resolve,reject)
}cach(e){
reject(e)
}
}
// 最後我們來實現較爲複雜的 then 函數
MyPromise.prototype.then = function(onFulfilled,onRejected){
const that = this
// 判斷兩個參數是否爲函數類型,因爲這兩個參數是可選參數
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v=>v
onRejected = typeof onRejected === 'function' ? onRejected : e=>throw e
// 當狀態不是等待態時,就去執行相對應的函數。如果狀態是等待態的話,就往回調函數中 push 函數
if(this.state === PENDING) {
this.resolvedCallbacks.push(onFulfilled)
this.rejectedCallbacks.push(onRejected)
}
if(this.state === RESOLVED) {
onFulfilled(that.value)
}
if(this.state === REJECTED) {
onRejected(that.value)
}
}
個人博客地址:大家可以看看