在前两篇(手写 Promise 系列 --- 1)和(手写 Promise 系列 ---2) 中,达成了3个目标
- Promise 实例状态改变 [✅]
- 正确的使用 then 接受两种状态的回调函数 [✅]
- Promise 的链式调用 [✅]
这一次需要达成的目标:
- Promise.reject & Promise.resolve [❓]
Promise.reject & Promise.resolve
根据MDN文档的提示,Promise函数上有两个属性(也就是所谓的静态属性)方法.
- Promise.reject 返回一个状态为 reject 的 promise 对象.
- Promise.resolve 返回一个状态为 resolve 的 promise 对象.
根据上述的说明:
- 两个静态函数内部仍然是返回的一个 promise 实例. (仍然需要一个正常的实例promise代码去承载)
- 这个实例不像传统的 new Promise 那样,有状态的改变(通常这个状态的改变都是异步的),而直接是定义成了reject or resolve.
所以,根据上述两条推论,我们可以猜测,类似于 Promise.reject or Promise.resolve 这种调用模式,就不存在所谓的异步操作了.基本全是同步的.
于是开始书写代码:
function GqsMyPromise (executor) {
this.state = GqsMyPromise.states.PENDING // 对应使用 new GqsPromise(fn) 这种调用方式
this.value = null
this.resolvedCallbacks = []
this.rejectedCallbacks = []
const _this = this
function resolve (value) {
if (_this.state === GqsMyPromise.states.PENDING) {
_this.state = GqsPromise.states.RESOLVE
_this.value = value
_this.resolvedCallbacks.forEach(resolve => (_this.value = resolve(_this.value)))
}
}
function reject (value) {
if (_this.state === GqsMyPromise.states.PENDING) {
_this.state = GqsMyPromise.states.REJECT
_this.value = value
_this.rejectedCallbacks.forEach(reject => (_this.value = reject(_this.value)))
}
}
// 注意,这里是里用new Promise(f) 的方式,创建 promise 实例,并且正确的传入的executor 时候的调用逻辑.
// 也就是这个promise 是存在异步状态改变的.
if (typeof executor === 'function') executor(resolve, reject)
}
GqsMyPromise.prototype.then = function (onResolved, onReject) {
const resolved = typeof onResolved === 'function' ? onResolved : v => v
const rejected = typeof onReject === 'function' ? onReject : v => v
switch (this.state) {
case GqsMyPromise.states.PENDING: // 注意,能到这里,那一定是用 new Promise 创建实例的.
this.rejectedCallbacks.push(rejected)
this.resolvedCallbacks.push(resolved)
break;
case GqsMyPromise.states.REJECT: // 能到这里的,一定是用 Promise.reject(value) 创建的 promise实例.它没有状态的改变(也就是没有异步的这个过程) // 所以,就有必要追加,直接调用即可.
this.value = rejected(this.value)
break;
case GqsMyPromise.states.RESOLVE: // 能到这里的,一定是用 Promise.resolve(value) 创建的 promise实例.它没有状态的改变(也就是没有异步的这个过程) // // 所以,就有必要追加,直接调用即可.
this.value = resolved(this.value)
break;
}
return this
}
// 这个方法的职责,直接返回一个状态为 rejected 的 promise 实例即可.
GqsMyPromise.reject = function (value) {
const p = new GqsMyPromise()
return Object.assign(p, {
state: GqsMyPromise.states.REJECT,
value
})
}
// 这个方法的职责,直接返回一个状态为 resolved 的 promise 实例即可.
GqsMyPromise.resolve = function (value) {
const p = new GqsMyPromise()
return Object.assign(p, {
state: GqsMyPromise.states.RESOLVE,
value
})
}
// Promise 实例的三种状态
GqsMyPromise.states = {
PENDING: 'PENDING',
RESOLVE: 'RESOLVE',
REJECT: 'REJECT'
}
console.log('------ GqsMyPromise.reject 测试 Begin ---------')
let rejectPromise = GqsMyPromise.reject('error!!!!')
rejectPromise.then(undefined, (err) => {
console.log(err)
return 'error2'
}).then(undefined, (err) => {
console.log(err)
})
console.log('----------- GqsMyPromise.reject 测试 End --------------')
console.log('------ GqsMyPromise.resolve 测试 Begin ---------')
let resolvePromise = GqsMyPromise.resolve('success')
resolvePromise.then(data => {
console.log(data)
return 'success2'
}, undefined)
.then(data => {
console.log(data)
})
console.log('----------- GqsMyPromise.resolve 测试 End --------------')
// GqsPromise.reject & GqsPromise.reject 代码都是同步的,因为promise状态直接就是 reject or resolve 了.它没有异步修改promise状态的这个过程.
查看结果:
relax-2:手写Promise relax$ node PromiseX.js
------ GqsMyPromise.reject 测试 Begin ---------
error!!!!
error2
----------- GqsMyPromise.reject 测试 End --------------
------ GqsMyPromise.resolve 测试 Begin ---------
success
success2
----------- GqsMyPromise.resolve 测试 End --------------
达成目标
- Promise 实例状态改变 [✅]
- 正确的使用 then 接受两种状态的回调函数 [✅]
- Promise 的链式调用 [✅]
- Promise.reject & Promise.resolve 静态方法完成,并完成链式调用[✅]
总结:
- Promise.reject 和 Promise.resolve 是直接返回状态为 resolve or reject 的 Promise 实例.
- 它和普通的使用 new Promise 还不一样. 因为 new Promise 一般都搭配一个异步的操作,用来改变当前 Promise 的状态.
- Promise.reject/resolve 直接就返回一个 reject/resolve 的promise,状态是同步的.所以后续的then以及链式调用都是基于同步的方式去调用(所以,就不需要像 new Promise 那样,需要把reject or resolve 缓存起来,以便异步修改状态完成之后,再去调用)
