手写一个promise用法_手写一个promise的过程
promise 的实现原理promise的三种状态pending
fulfilled
rejectedclass Promise {
constructor(executor) {
// Promise接一个方法 (resolve，reject)=>{}
// 开始的状态
this.state = 'pending'
// 成功的状态
this.value = undefined
// 失败的状态
this.result = undefined
// 状态执行的时候，要立即改变，且不可逆转
const resolve = (value) => {
if (this.state === 'pending') {
this.state = 'fulfilled'
this.value = value
}
}
const reject = (reason) => {
if (this.state === 'pending') {
this.state = 'rejected'
this.result = reason
}
}
executor(resolve, reject) //这个方法要立即执行
}
// then接受两个参数，都是方法
then(onFulfilled, onRejected) {
// 如果这样写是同步的，this.state一直是padding的状态
console.log(this.state)
// 如果成功，传入成功的参数
if (this.state === 'fulfilled') {
onFulfilled(this.value)
}
// 如果失败，传入失败的参数
if (this.state === 'rejected') {
onRejected(this.result)
}
}
}上面是同步的，执行then方法后，this.state一直是pending的状态发布订阅者模式module.exports = class Promise {
constructor(executor) {
// Promise接一个方法 (resolve，reject)=>{}
// 开始的状态
this.state = 'pending'
// 成功的状态
this.value = undefined
// 失败的状态
this.result = undefined
// 成功的订阅者数组
this.onResolvedCallbacks = []
// 失败的订阅者数组
this.onRejectedCallbacks = []
// 状态执行的时候，要立即改变，且不可逆转
const resolve = (value) => {
if (this.state === 'pending') {
this.state = 'fulfilled'
this.value = value
// 执行resolve的时候，把 this.onResolvedCallbacks里面的方法全部执行一遍
this.onResolvedCallbacks.forEach(fn => fn())
}
}
const reject = (reason) => {
if (this.state === 'pending') {
this.state = 'rejected'
this.result = reason
// 执行reject的时候，把 this.onRejectedCallbacks里面的方法全部执行一遍
this.onRejectedCallbacks.forEach(fn => fn())
}
}
executor(resolve, reject) //这个方法要立即执行
}
// then接受两个参数，都是方法
then(onFulfilled, onRejected) {
// 如果这样写是同步的，this.state一直是padding的状态
// 如果成功，传入成功的参数
if (this.state === 'fulfilled') {
onFulfilled(this.value)
}
// 如果失败，传入失败的参数
if (this.state === 'rejected') {
onRejected(this.result)
}
// 发布订阅者模式
// 如果状态是 pending
// 就把要做的方法传入 待发布状态中去
if (this.state === 'padding') {
this.onResolvedCallbacks.push(() => {
onFulfilled(this.value)
})
this.onRejectedCallbacks.push(() => {
onRejected(this.result)
})
}
}
}但是上面没有链式调用。then()方法后面不能接then()解决then()方法不返回promise的问题class Promise {
constructor(executor) {
// Promise接一个方法 (resolve，reject)=>{}
// 开始的状态
this.state = 'pending'
// 成功的状态
this.value = undefined
// 失败的状态
this.result = undefined
// 成功的订阅者数组
this.onResolvedCallbacks = []
// 失败的订阅者数组
this.onRejectedCallbacks = []
// 状态执行的时候，要立即改变，且不可逆转
const resolve = (value) => {
if (this.state === 'pending') {
this.state = 'fulfilled'
this.value = value
// 执行resolve的时候，把 this.onResolvedCallbacks里面的方法全部执行一遍
this.onResolvedCallbacks.forEach(fn => fn())
}
}
const reject = (reason) => {
if (this.state === 'pending') {
this.state = 'rejected'
this.result = reason
// 执行reject的时候，把 this.onRejectedCallbacks里面的方法全部执行一遍
this.onRejectedCallbacks.forEach(fn => fn())
}
}
executor(resolve, reject) //这个方法要立即执行
}
// then接受两个参数，都是方法
then(onFulfilled, onRejected) {
// 如果这样写是同步的，this.state一直是padding的状态
// 如果成功，传入成功的参数
const promise2 = new Promise((resolve, reject) => {
// 解决不能链式调用的问题。需要再返回一个promise
if (this.state === 'fulfilled') {
setTimeout(() => {
const x = onFulfilled(this.value)
resolvePromise(promise2, x, resolve, reject)
}, 0)
}
// 如果失败，传入失败的参数
if (this.state === 'rejected') {
setTimeout(() => {
const x = onRejected(this.result)
resolvePromise(promise2, x, resolve, reject)
}, 0)
}
// 发布订阅者模式
// 如果状态是 padding
// 就把要做的方法传入 待发布状态中去
if (this.state === 'padding') {
this.onResolvedCallbacks.push(() => {
setTimeout(() => {
const x = onFulfilled(this.value)
resolvePromise(promise2, x, resolve, reject)
}, 0)
})
this.onRejectedCallbacks.push(() => {
setTimeout(() => {
const x = onRejected(this.result)
resolvePromise(promise2, x, resolve, reject)
}, 0)
})
}
})
return promise2
}
}
// 定义resolvePromise 方法
const resolvePromise = (promise2, x, resolve, reject) => {
// console.log(promise2, x, resolve, reject)
if (promise2 === x) {
console.log(11111)
return reject(new TypeError('循环引用！'))
}
// 判断 x 的类型
if (typeof x === 'function' || (typeof x === 'object' && x !== null)) {
// 复杂类型
try {
const then = x.then
if (typeof then === 'function') {
// 认为这个确实是一个promise
then.call(x, y => {
// 只能解决一次，如果resolve里面嵌套n个promise
// resolve(y)
// 递归解析当前的x
resolvePromise(promise2, y, resolve, reject)
}, r => {
reject(r)
})
}
} catch (error) {
reject(error)
}
} else {
// 基本类型
resolve(x)
}
}