手写promise
作者:互联网
// 判断变量是否为function
const isFunction = variable => typeof variable === 'function'
// 三种状态
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'
// 定义Promise的三种状态常量
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)
}
}
// 添加resolve时执行的函数
_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对象状态改变后,
* 当前Promise的状态才会改变,且状态取决于参数Promise对象的状态
*/
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)
}
}
setTimeout(run, 0)
}
// 添加then方法
then(onFulfilled, onRejected) {
const {_value, _status } = this
// 返回一个新的Promise对象
return new Promise((onFulfilledNext, onRejectedNext) => {
// 封装一个成功时执行的函数
let fulfilled = value => {
try {
if(!isFunction(onFulfilled)) {
onFulfilledNext(value)
} else {
let res = onRejected(value);
if(res instanceof MyPromise) {
// 如果当前回调函数返回MyPromise对象,必须等待其状态改变后再执行下一个回调
res.then(onFulfilledNext, onRejectedNext)
} else {
onFulfilledNext(res)
}
}
} catch (err) {
onRejectedNext(err)
}
}
// 封装一个失败时执行的函数
let rejected = error => {
try {
if(!isFunction(onRejected)){
onRejectedNext(error)
} else {
let res = onRejected(error)
if(res instanceof MyPromise) {
// 如果当前回调函数返回MyPromise对象, 必须等待其状态改变后再执行下一个回调
onFulfilledNext(res)
}
}
} catch (error) {
// 如果函数执行出错,新的Promise方法回调加入执行队列等待执行
onRejectedNext(error)
}
}
switch (_status) {
// 当状态为pending时,将then方法回调函数加入执行队列等待执行
case PENDING:
this._fulfilledQueues.push(onFulfilled)
this._rejectedQueues.push(onRejected)
break
case FULFILLED:
onFulfilled(_value)
break
case REJECTED:
onRejected(_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++
if(count === list.length) resolve(values)
}, err => {
rejected(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})
)
}
}
const name = new MyPromise((resolve, reject) => {
console.log(1)
resolve()
})
name.then((res, rej) => {
console.log(2)
})
标签:resolve,err,reject,value,MyPromise,promise,._,手写 来源: https://blog.csdn.net/qq_40957332/article/details/121226020