// 自定义promise
class My_promise {
constructor(executor) {
this.status = "pending"
this.value = null
this.onFulfilledCallbacks = []
this.onRejectedCallbacks = []
const resolve = (value) => {
if(this.status === "pending") {
this.status = "fulfilled"
this.value = value
// 调用then方法时,已将then需要处理的函数放入队列 resolve 时需要执行then方法
this.onFulfilledCallbacks.forEach((callback) => callback(value))
}
}
const reject = (value) => {
if(this.status === "pending") {
this.status = "rejected"
this.value = value
// 调用then方法时,已将then需要处理的函数放入队列 reject 时需要执行then方法
this.onRejectedCallbacks.forEach((callback) => callback(value))
}
}
try {
executor(resolve, reject)
}catch (e) {
reject(e)
}
}
then(onFulfilled, onRejected) {
return new My_promise((resolve, reject) => {
if(this.status === "pending") {
this.onFulfilledCallbacks.push(() => {
try {
// 如果要执行的onFulfilled返回结果是promise
const fulfilledFromLastPromise = onFulfilled(this.value)
if(fulfilledFromLastPromise instanceof My_promise) {
fulfilledFromLastPromise.then(resolve, reject)
} else {
resolve(fulfilledFromLastPromise)
}
} catch (error) {
reject(error)
}
})
this.onRejectedCallbacks.push(() => {
try {
const rejectedFromLastPromise = onRejected(this.value)
if(rejectedFromLastPromise instanceof My_promise) {
rejectedFromLastPromise.then(resolve, reject)
} else {
reject(rejectedFromLastPromise)
}
} catch (error) {
reject(error)
}
})
}
if(this.status === "fulfilled") {
try {
const fulfilledFromLastPromise = onFulfilled(this.value)
if(fulfilledFromLastPromise instanceof My_promise) {
fulfilledFromLastPromise.then(resolve, reject)
} else {
resolve(fulfilledFromLastPromise)
}
} catch (error) {
reject(error)
}
}
if(this.status === "rejected") {
try {
const rejectedFromLastPromise = onRejected(this.value)
if(rejectedFromLastPromise instanceof My_promise) {
rejectedFromLastPromise.then(resolve, reject)
} else {
reject(rejectedFromLastPromise)
}
} catch (error) {
reject(error)
}
}
})
}
}
// 测试用例
const p = new My_promise((resolve, reject) => {
console.log(1)
setTimeout(() => {
resolve(2)
},1000)
})
p.then((data) => {
console.log(data)
return 3
}).then((data) => {
console.log(data, 'then2')
return 4
}).then(
// 如果返回的是promise 则将此then注册函数的执行时机,交给新创建的 promise函数
(data) => {
console.log(data, 'then3')
return new My_promise((resolve) => {
console.log(5)
resolve(6)
setTimeout(() => {
console.log(7)
},0)
console.log(6)
})
}).then(() => {
console.log(8)
})
// 执行顺序结果
// 1 2 3 4 5 6 8 7
用js实现一个promise
最新推荐文章于 2024-07-12 09:36:48 发布