基础代码
const PENDING = "pending" // 等待
const FULFILLED = "fulfilled" // 成功
const REJECTED = "rejected" // 失败
class MyPromise {
constructor(executor) {
executor(this.resolve, this.reject)
}
status = PENDING // 状态一旦确定,就不能再改变
resolve = () => {
// 如果状态不是等待状态,就阻止程序向下执行
if (this.status !== PENDING) return
// 将状态改为成功
this.status = FULFILLED
}
reject = () => {
// 如果状态不是等待状态,就阻止程序向下执行
if (this.status !== PENDING) return
// 将状态改为失败
this.status = REJECTED
}
}
支持 then 方法
const PENDING = "pending" // 等待
const FULFILLED = "fulfilled" // 成功
const REJECTED = "rejected" // 失败
class MyPromise {
constructor(executor) {
executor(this.resolve, this.reject)
}
status = PENDING // 状态一旦确定,就不能再改变
resolve = () => {
// 如果状态不是等待状态,就阻止程序向下执行
if (this.status !== PENDING) return
// 将状态改为成功
this.status = FULFILLED
}
reject = () => {
// 如果状态不是等待状态,就阻止程序向下执行
if (this.status !== PENDING) return
// 将状态改为失败
this.status = REJECTED
}
then(success, fail) {
if (this.status === FULFILLED) {
// 成功
success()
} else if (this.status === REJECTED) {
// 失败
fail()
} else {
// 异常
console.log("异常状态:", this.status)
}
}
}
错误处理
const PENDING = "pending" // 等待
const FULFILLED = "fulfilled" // 成功
const REJECTED = "rejected" // 失败
class MyPromise {
constructor(executor) {
executor(this.resolve, this.reject)
}
status = PENDING // 状态一旦确定,就不能再改变
value = undefined // 成功之后的值
error = undefined // 失败之后的原因
// 成功的方法
resolve = (value) => {
// 如果状态不是等待状态,就阻止程序向下执行
if (this.status !== PENDING) return
// 将状态改为成功
this.status = FULFILLED
// 修改成功之后的值
this.value = value
}
// 失败的方法
reject = (error) => {
// 如果状态不是等待状态,就阻止程序向下执行
if (this.status !== PENDING) return
// 将状态改为失败
this.status = REJECTED
// 记录失败的原因
this.error = error
}
then(success, fail) {
if (this.status === FULFILLED) {
// 成功
success()
} else if (this.status === REJECTED) {
// 失败
fail()
} else {
// 异常
console.log("异常状态:", this.status)
}
}
}
完善 then 方法
const PENDING = "pending" // 等待
const FULFILLED = "fulfilled" // 成功
const REJECTED = "rejected" // 失败
class MyPromise {
constructor(executor) {
executor(this.resolve, this.reject)
}
status = PENDING // 状态一旦确定,就不能再改变
value = undefined // 成功之后的值
error = undefined // 失败之后的原因
// 成功的方法
resolve = (value) => {
// 如果状态不是等待状态,就阻止程序向下执行
if (this.status !== PENDING) return
// 将状态改为成功
this.status = FULFILLED
// 修改成功之后的值
this.value = value
}
// 失败的方法
reject = (error) => {
// 如果状态不是等待状态,就阻止程序向下执行
if (this.status !== PENDING) return
// 将状态改为失败
this.status = REJECTED
// 记录失败的原因
this.error = error
}
// 执行
then(success, fail) {
if (this.status === FULFILLED) {
// 成功
success(this.value)
} else if (this.status === REJECTED) {
// 失败
fail(this.error)
} else {
// 异常
console.log("异常状态:", this.status)
}
}
}
测试
const MyPromise = require("./c06_promise")
// 创建对象
let promise = new MyPromise((resolve, reject) => {
// resolve("成功")
reject("错误...")
})
// 调用
promise.then(
v => console.log(v),
err => console.log(err)
)
添加错误和成功的属性
const PENDING = "pending" // 等待
const FULFILLED = "fulfilled" // 成功
const REJECTED = "rejected" // 失败
class MyPromise {
constructor(executor) {
executor(this.resolve, this.reject)
}
status = PENDING // 状态一旦确定,就不能再改变
value = undefined // 成功之后的值
error = undefined // 失败之后的原因
// 成功的方法
resolve = (value) => {
// 如果状态不是等待状态,就阻止程序向下执行
if (this.status !== PENDING) return
// 将状态改为成功
this.status = FULFILLED
// 修改成功之后的值
this.value = value
}
// 失败的方法
reject = (error) => {
// 如果状态不是等待状态,就阻止程序向下执行
if (this.status !== PENDING) return
// 将状态改为失败
this.status = REJECTED
// 记录失败的原因
this.error = error
}
// 执行
then(success, fail) {
if (this.status === FULFILLED) {
// 成功
success(this.value)
} else if (this.status === REJECTED) {
// 失败
fail(this.error)
} else {
// 异常
console.log("异常状态:", this.status)
}
}
}
// 导出
module.exports = MyPromise
记录回调方法
const PENDING = "pending" // 等待
const FULFILLED = "fulfilled" // 成功
const REJECTED = "rejected" // 失败
class MyPromise {
constructor(executor) {
executor(this.resolve, this.reject)
}
status = PENDING // 状态一旦确定,就不能再改变
value = undefined // 成功之后的值
error = undefined // 失败之后的原因
successCallback = undefined // 成功的回调
errorCallback = undefined // 失败的回调
// 成功的方法
resolve = (value) => {
// 如果状态不是等待状态,就阻止程序向下执行
if (this.status !== PENDING) return
// 将状态改为成功
this.status = FULFILLED
// 修改成功之后的值
this.value = value
}
// 失败的方法
reject = (error) => {
// 如果状态不是等待状态,就阻止程序向下执行
if (this.status !== PENDING) return
// 将状态改为失败
this.status = REJECTED
// 记录失败的原因
this.error = error
}
// 执行
then(success, fail) {
if (this.status === FULFILLED) {
// 成功
success(this.value)
} else if (this.status === REJECTED) {
// 失败
fail(this.error)
} else {
// 还是等等状态,遇到了异步任务
// 将成功回调和失败回调先存储起来,等待异步执行
this.successCallback = success
this.errorCallback = fail
}
}
}
// 导出
module.exports = MyPromise
完善 resolve 和 reject 方法
const PENDING = "pending" // 等待
const FULFILLED = "fulfilled" // 成功
const REJECTED = "rejected" // 失败
class MyPromise {
constructor(executor) {
executor(this.resolve, this.reject)
}
status = PENDING // 状态一旦确定,就不能再改变
value = undefined // 成功之后的值
error = undefined // 失败之后的原因
successCallback = undefined // 成功的回调
errorCallback = undefined // 失败的回调
// 成功的方法
resolve = (value) => {
// 如果状态不是等待状态,就阻止程序向下执行
if (this.status !== PENDING) return
// 将状态改为成功
this.status = FULFILLED
// 修改成功之后的值
this.value = value
// 如果回调函数存在,说明有异步方法等待执行,调用
this.successCallback && this.successCallback(this.value)
}
// 失败的方法
reject = (error) => {
// 如果状态不是等待状态,就阻止程序向下执行
if (this.status !== PENDING) return
// 将状态改为失败
this.status = REJECTED
// 记录失败的原因
this.error = error
// 如果回调函数存在,说明有异步方法等待执行,调用
this.errorCallback && this.errorCallback(this.error)
}
// 执行
then(success, fail) {
if (this.status === FULFILLED) {
// 成功
success(this.value)
} else if (this.status === REJECTED) {
// 失败
fail(this.error)
} else {
// 还是等等状态,遇到了异步任务
// 将成功回调和失败回调先存储起来,等待异步执行
this.successCallback = success
this.errorCallback = fail
}
}
}
// 导出
module.exports = MyPromise
测试异步的支持
const PENDING = "pending" // 等待
const FULFILLED = "fulfilled" // 成功
const REJECTED = "rejected" // 失败
class MyPromise {
constructor(executor) {
executor(this.resolve, this.reject)
}
status = PENDING // 状态一旦确定,就不能再改变
value = undefined // 成功之后的值
error = undefined // 失败之后的原因
successCallback = undefined // 成功的回调
errorCallback = undefined // 失败的回调
// 成功的方法
resolve = (value) => {
// 如果状态不是等待状态,就阻止程序向下执行
if (this.status !== PENDING) return
// 将状态改为成功
this.status = FULFILLED
// 修改成功之后的值
this.value = value
// 如果回调函数存在,说明有异步方法等待执行,调用
this.successCallback && this.successCallback(this.value)
}
// 失败的方法
reject = (error) => {
// 如果状态不是等待状态,就阻止程序向下执行
if (this.status !== PENDING) return
// 将状态改为失败
this.status = REJECTED
// 记录失败的原因
this.error = error
// 如果回调函数存在,说明有异步方法等待执行,调用
this.errorCallback && this.errorCallback(this.error)
}
// 执行
then(success, fail) {
if (this.status === FULFILLED) {
// 成功
success(this.value)
} else if (this.status === REJECTED) {
// 失败
fail(this.error)
} else {
// 还是等等状态,遇到了异步任务
// 将成功回调和失败回调先存储起来,等待异步执行
this.successCallback = success
this.errorCallback = fail
}
}
}
// 导出
module.exports = MyPromise
测试代码:
const MyPromise = require("./c10_promise")
// 创建对象
let promise = new MyPromise((resolve, reject) => {
setTimeout(() => resolve("成功"), 3000)
// reject("错误...")
})
// 调用
promise.then(
v => console.log(v),
err => console.log(err)
)