1. 程式人生 > >實現promise

實現promise

efi .sh ror led trie while isf ase 出錯

// 判斷變量否為function
const isFunction = variable => typeof variable === ‘function‘
// 定義Promise的三種狀態常量
const PENDING = ‘PENDING‘
const FULFILLED = ‘FULFILLED‘
const REJECTED = ‘REJECTED‘

class MyPromise {
constructor (handle) {
if (!isFunction(handle)) {
throw new Error(‘MyPromise must accept a function as a parameter‘)

}
// 添加狀態
this._status = PENDING
// 添加狀態
this._value = undefined
// 添加成功回調函數隊列
this._fulfilledQueues = []
// 添加失敗回調函數隊列
this._rejectedQueues = []
// 執行handle
try {
handle(this._resolve.bind(this), this._reject.bind(this))
} catch (err) {
this._reject(err)
}
}
// 添加resovle時執行的函數
_resolve (val) {
const run = () => {
if (this._status !== PENDING) return
// 依次執行成功隊列中的函數,並清空隊列
const runFulfilled = (value) => {
let cb;
while (cb = this._fulfilledQueues.shift()) {
cb(value)
}
}
// 依次執行失敗隊列中的函數,並清空隊列
const runRejected = (error) => {
let cb;
while (cb = this._rejectedQueues.shift()) {
cb(error)
}
}
/* 如果resolve的參數為Promise對象,則必須等待該Promise對象狀態改變後,
當前Promsie的狀態才會改變,且狀態取決於參數Promsie對象的狀態
*/
if (val instanceof MyPromise) {
val.then(value => {
this._value = value
this._status = FULFILLED
runFulfilled(value)
}, err => {
this._value = err
this._status = REJECTED
runRejected(err)
})
} else {
this._value = val
this._status = FULFILLED
runFulfilled(val)
}
}
// 為了支持同步的Promise,這裏采用異步調用
setTimeout(run, 0)
}
// 添加reject時執行的函數
_reject (err) {
if (this._status !== PENDING) return
// 依次執行失敗隊列中的函數,並清空隊列
const run = () => {
this._status = REJECTED
this._value = err
let cb;
while (cb = this._rejectedQueues.shift()) {
cb(err)
}
}
// 為了支持同步的Promise,這裏采用異步調用
setTimeout(run, 0)
}
// 添加then方法
then (onFulfilled, onRejected) {
const { _value, _status } = this
// 返回一個新的Promise對象
return new MyPromise((onFulfilledNext, onRejectedNext) => {
// 封裝一個成功時執行的函數
let fulfilled = value => {
try {
if (!isFunction(onFulfilled)) {
onFulfilledNext(value)
} else {
let res = onFulfilled(value);
if (res instanceof MyPromise) {
// 如果當前回調函數返回MyPromise對象,必須等待其狀態改變後在執行下一個回調
res.then(onFulfilledNext, onRejectedNext)
} else {
//否則會將返回結果直接作為參數,傳入下一個then的回調函數,並立即執行下一個then的回調函數
onFulfilledNext(res)
}
}
} catch (err) {
// 如果函數執行出錯,新的Promise對象的狀態為失敗
onRejectedNext(err)
}
}
// 封裝一個失敗時執行的函數
let rejected = error => {
try {
if (!isFunction(onRejected)) {
onRejectedNext(error)
} else {
let res = onRejected(error);
if (res instanceof MyPromise) {
// 如果當前回調函數返回MyPromise對象,必須等待其狀態改變後在執行下一個回調
res.then(onFulfilledNext, onRejectedNext)
} else {
//否則會將返回結果直接作為參數,傳入下一個then的回調函數,並立即執行下一個then的回調函數
onFulfilledNext(res)
}
}
} catch (err) {
// 如果函數執行出錯,新的Promise對象的狀態為失敗
onRejectedNext(err)
}
}
switch (_status) {
// 當狀態為pending時,將then方法回調函數加入執行隊列等待執行
case PENDING:
this._fulfilledQueues.push(fulfilled)
this._rejectedQueues.push(rejected)
break
// 當狀態已經改變時,立即執行對應的回調函數
case FULFILLED:
fulfilled(_value)
break
case REJECTED:
rejected(_value)
break
}
})
}
// 添加catch方法
catch (onRejected) {
return this.then(undefined, onRejected)
}
// 添加靜態resolve方法
static resolve (value) {
// 如果參數是MyPromise實例,直接返回這個實例
if (value instanceof MyPromise) return value
return new MyPromise(resolve => resolve(value))
}
// 添加靜態reject方法
static reject (value) {
return new MyPromise((resolve ,reject) => reject(value))
}
// 添加靜態all方法
static all (list) {
return new MyPromise((resolve, reject) => {
/**
* 返回值的集合
*/
let values = []
let count = 0
for (let [i, p] of list.entries()) {
// 數組參數如果不是MyPromise實例,先調用MyPromise.resolve
this.resolve(p).then(res => {
values[i] = res
count++
// 所有狀態都變成fulfilled時返回的MyPromise狀態就變成fulfilled
if (count === list.length) resolve(values)
}, err => {
// 有一個被rejected時返回的MyPromise狀態就變成rejected
reject(err)
})
}
})
}
// 添加靜態race方法
static race (list) {
return new MyPromise((resolve, reject) => {
for (let p of list) {
// 只要有一個實例率先改變狀態,新的MyPromise的狀態就跟著改變
this.resolve(p).then(res => {
resolve(res)
}, err => {
reject(err)
})
}
})
}
finally (cb) {
return this.then(
value => MyPromise.resolve(cb()).then(() => value),
reason => MyPromise.resolve(cb()).then(() => { throw reason })
);
}
}

實現promise