Promise类核心逻辑实现
/*
1. Promise就是一个类，在执行这个类的时候，需要传递一个执行器进去，执行器会立即执行
2. Promise中有三种状态：成功fulfilled、失败rejected、等待pending
pending -> fulfilled
pending -> rejected
一旦状态确定就不可更改
3. resolve和reject函数是用来更改状态的
resolve：fulfilled
reject：rejected
4. then方法内部做的事情就是判断状态，如果状态是成功就调用成功回调函数，如果状态是失败就调用失败回调函数。then方法是被定义在原型对象中的
5. then成功回调有一个参数，表示成功之后的值；失败回调有一个参数，表示失败后的原因
*/
const MyPromise = require('./MyPromise')
let promise = new MyPromise((resolve, reject) => {
resolve('成功')
reject('失败')
})
promise.then(value => {
console.log(value)
}, reason => {
console.log(reason)
})
// MyPromise.js
const PENDING = 'pending' // 等待
const FULFILLED = 'fulfilled' // 成功
const REJECTED = 'rejected' // 失败
class MyPromise {
constructor(executor) {
// 执行器立即执行，因此在此处调用传入的执行器函数
executor(this.resolve, this.reject)
}
// Promise状态
status = PENDING
// 成功之后的值
value = undefined
// 失败之后的原因
reason = undefined
resolve = value => {
// 如果状态不是等待，阻止程序向下执行
if (this.status !== PENDING) return
// 将状态更改为成功
this.status = FULFILLED
// 保存成功之后的值
this.value = value
}
reject = reason => {
// 如果状态不是等待，阻止程序向下执行
if (this.status !== PENDING) return
// 将状态更改为失败
this.status = REJECTED
// 保存失败后的原因
this.reason = reason
}
then(successCallback, failCallback) {
// 判断状态
if (this.status === FULFILLED) {
successCallback(this.value)
} else if (this.status === REJECTED) {
failCallback(this.reason)
}
}
}
module.exports = MyPromise
在Promise类中加入异步逻辑
如果有异步情况，那么需要在.then()方法中加入对PENDING状态的判断，由于resolve/reject还未执行，需要先将回调函数存储起来，等到resolve/reject执行的时候调用。
// 如果执行器函数中是异步
let promise = new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve('成功')
}, 1000);
})
class MyPromise {
// ...
// 成功回调函数
successCallback = undefined
// 失败回调函数
failCallback = undefined
resolve = value => {
// ...
// 判断成功回调是否存在，如果存在则调用
this.successCallback && this.successCallback(this.value)
}
reject = reason => {
// ...
// 判断失败回调是否存在，如果存在则调用
this.failCallback && this.failCallback(this.reason)
}
then(successCallback, failCallback) {
// 判断状态
if (this.status === FULFILLED) {
successCallback(this.value)
} else if (this.status === REJECTED) {
failCallback(this.reason)
} else {
// 等待
// 将成功回调和失败回调存储起来
this.successCallback = successCallback
this.failCallback = failCallback
}
}
}
实现then方法多次调用添加多个处理函数
如果.then()方法被多次调用，那么需要存储多个处理函数，因此将MyPromise类中的successCallback和failCallback改成数组。
// 如果then被多次调用
promise.then(value => {
console.log(value)
}, reason => {
console.log(reason)
})
promise.then(value => {
console.log(value)
}, reason => {
console.log(reason)
})
promise.then(value => {
console.log(value)
}, reason => {
console.log(reason)
})
class MyPromise {
// ...
// 成功回调函数
successCallback = []
// 失败回调函数
failCallback = []
resolve = value => {
// ...
// 判断成功回调是否存在，如果存在则调用
// this.successCallback && this.successCallback(this.value)
while (this.successCallback.length !== 0) this.successCallback.shift()(this.value)
}
reject = reason => {
// ...
// 判断失败回调是否存在，如果存在则调用
// this.failCallback && this.failCallback(this.reason)
while (this.failCallback.length !== 0) this.failCallback.shift()(this.reason)
}
then(successCallback, failCallback) {
// 判断状态
if (this.status === FULFILLED) {
successCallback(this.value)
} else if (this.status === REJECTED) {
failCallback(this.reason)
} else {
// 等待
// 将成功回调和失败回调存储起来
this.successCallback.push(successCallback)
this.failCallback.push(failCallback)
}
}
}
module.exports = MyPromise
实现then方法的链式调用
要实现.then()方法的链式调用，那么它返回的必须是Promise对象，因此需要改写then方法，创建一个新的Promise对象，然后通过resolve将本次结果传递给下次调用。
// then方法的链式调用
function other() {
return new MyPromise((resolve, reject) => {
resolve('other')
})
}
promise.then(value => {
console.log(value)
return other()
}).then(value => {
console.log(value)
})
class MyPromise {
// ...
then(successCallback, failCallback) {
let promise2 = new MyPromise((resolve, reject) => {
// 判断状态
if (this.status === FULFILLED) {
let x = successCallback(this.value)
// 判断x的值是普通值还是Promise对象
// 如果是普通值，直接调用resolve
// 如果是Promise对象，查看Promise对象返回的结果
// 再根据Promise对象返回的结果决定调用resolve还是reject
resolvePromise(x, resolve, reject)
}
// ...
})
return promise2
}
}
function resolvePromise(x, resolve, reject) {
if (x instanceof MyPromise) {
// Promise对象
// x.then(value => resolve(value), reason => reject(reason))
x.then(resolve, reject)
} else {
// 普通值
resolve(x)
}
}
then方法链式调用识别Promise对象自返回
let p1 = promise.then(value => {
console.log(value)
return p1
})
p1.then(value => {
console.log(value)
}, reason => {
console.log(reason)
})
class MyPromise {
// ...
then(successCallback, failCallback) {
let promise2 = new MyPromise((resolve, reject) => {
// 判断状态
if (this.status === FULFILLED) {
// 为了能够取到promise2，将此段代码改成异步
setTimeout(() => {
let x = successCallback(this.value)
// 判断x的值是普通值还是Promise对象
// 如果是普通值，直接调用resolve
// 如果是Promise对象，查看Promise对象返回的结果
// 再根据Promise对象返回的结果决定调用resolve还是reject
resolvePromise(promise2, x, resolve, reject)
}, 0);
}
// ...
})
return promise2
}
}
function resolvePromise(promise2, x, resolve, reject) {
// 如果当前Promise对象自返回，则报错
if (promise2 === x) {
return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
}
// ...
}
捕获错误及then链式调用其他状态代码补充
1.执行器中的错误捕获；
2.then的回调函数报错，要在下一个then方法中捕获到。
// 错误捕获
let promise = new Promise((resolve, reject) => {
// 第一个
throw new Error('executor error')
resolve('成功')
})
promise.then(value => {
// 第二个
throw new Error('then error')
console.log(value)
}, reason => {
console.log(reason)
}).then(value => {
console.log(value)
}, reason => {
console.log('第二个回调函数捕获错误')
console.log(reason.message);
})
class MyPromise {
constructor(executor) {
try {
// 执行器立即执行，因此在此处调用传入的执行器函数
executor(this.resolve, this.reject)
} catch (e) {
this.reject(e)
}
}
// ...
resolve = value => {
// ...
while (this.successCallback.length !== 0) this.successCallback.shift()()
}
reject = reason => {
// ...
while (this.failCallback.length !== 0) this.failCallback.shift()()
}
then(successCallback, failCallback) {
let promise2 = new MyPromise((resolve, reject) => {
// 判断状态
if (this.status === FULFILLED) {
// 为了能够取到promise2，将此段代码改成异步
setTimeout(() => {
try {
let x = successCallback(this.value)
// 判断x的值是普通值还是Promise对象
// 如果是普通值，直接调用resolve
// 如果是Promise对象，查看Promise对象返回的结果
// 再根据Promise对象返回的结果决定调用resolve还是reject
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
} else if (this.status === REJECTED) {
setTimeout(() => {
try {
let x = failCallback(this.reason)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
} else {
// 等待
// 将成功回调和失败回调存储起来
this.successCallback.push(() => {
setTimeout(() => {
try {
let x = successCallback(this.value)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
})
this.failCallback.push(() => {
setTimeout(() => {
try {
let x = failCallback(this.reason)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
})
}
})
return promise2
}
}
将then方法的参数变成可选参数
// then方法不传参
promise.then().then().then(value => {
console.log(value)
}, reason => {
console.log(reason)
})
then(successCallback, failCallback) {
// then方法可以不传参，因此需要先判断
successCallback = successCallback ? successCallback : value => value
failCallback = failCallback ? failCallback : reason => { throw reason } // 使用throw抛出异常
// ...
Promise.all()方法的实现
static all(array) {
let result = []
let index = 0
return new MyPromise((resolve, reject) => {
function addData(key, value) {
result[key] = value
index++
// 防止Promise对象中有异步操作返回空值
if (index === array.length) {
resolve(result)
}
}
for (let i = 0; i < array.length; i++) {
let current = array[i]
if (current instanceof MyPromise) {
// Promise对象
current.then(value => addData(i, value), reason => reject(reason))
} else {
// 普通值
addData(i, current)
}
}
})
}
Promise.resolve方法的实现
static resolve(value) {
if (value instanceof MyPromise) return value
return new MyPromise(resolve => resolve(value))
}
Promise.finally方法的实现
finally(callback) {
// 不管是否成功都调用回调函数
// 调用this.then方法得到当前Promise对象的状态
// finally方法之后可以链式调用then，因此需要返回Promise对象
return this.then(value => {
// 第一种写法
// callback()
// return value
// 第二种写法
return MyPromise.resolve(callback()).then(() => value)
// callback函数中可能有异步操作，因此需要等待callback执行完毕再返回value
}, reason => {
// callback()
// throw reason
return MyPromise.resolve(callback()).then(() => { throw reason })
})
}
catch方法的实现
catch(failCallback) {
return this.then(undefined, failCallback)
}
