Promise最常见的应用就是处理异步请求。而之前的代码没有关于异步逻辑的处理,测试代码做一下修改
let promise = new MyPromise((resolve, reject) => {
// resolve('---success----');
setTimeout(()=>{
resolve('success')
},1000)
// reject("---failed----");
})
promise.then(value => {
console.log(value);
}, reason => {
console.log(reason)
})
测试代码中加入了setTimeout
,按照使用Promise
的习惯,我们希望代码在等待1秒之后再执行resolve
then(successCallback, failedCallback) {
// 状态判断
if (this.status === FULFILLED) {
successCallback(this.value)
} else if (this.status === REJECTED) {
failedCallback(this.reason)
}
}
在MyPromise
类中,then
方法只判断了成功和失败两种状态,当测试代码中出现异步逻辑的时候,程序会继续向下进行执行then
方法。而在then
方法里面,此时的状态还是pending
。所以要加入第三种等待的状态判断。
这里面需要再定义两个状态的回调属性,初始值是undefined
,在then
方法中,将参数赋值给两个属性。并且在resolve
方法和reject
方法中,需要判断回调属性是否存在,存在就执行。
// 成功回调
successCallback = undefined;
// 失败回调
failedCallback = undefined;
resolve
和reject
方法更改:
resolve = value => {
// 如果状态不是等待,阻止程序向下进行
if (this.status !== PENDING) return
// 更改状态为成功
this.status = FULFILLED
// 保存成功的值
this.value = value;
// 判断成功回调是否存在,如果存在就调用
this.successCallback && this.successCallback(this.value);
}
reject = reason => {
// 如果状态不是等待,阻止程序向下进行
if (this.status !== PENDING) return
// 更改状态为失败
this.status = REJECTED
// 保存失败的原因
this.reason = reason;
// 判断失败回调是否存在,存在就调用
this.failedCallback && this.failedCallback(this.reason);
}
then
方法修改
then(successCallback, failedCallback) {
// 状态判断
if (this.status === FULFILLED) {
successCallback(this.value)
} else if (this.status === REJECTED) {
failedCallback(this.reason)
} else {
// 等待,需要将成功回调和失败回调存储起来,等待需要执行的时候才执行
this.successCallback = successCallback;
this.failedCallback = failedCallback;
}
}
测试代码测试通过,等待一秒后打印success
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。