###promise原理系列目录:

promise实现原理(一)promise.then

promise实现原理(二)promise.catch

promise实现原理(三)promise.finally

promise实现原理(四)promise.all与promise.race

promise实现原理(五)promise.allSettled与promise.any

promise实现原理(六)promise.resolve与promise.reject

promise实现最终版!合成代码

#上一期,我们已经完成了支持状态和.then链式调用的promise。
还缺失的内容↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

1
2
3
4
5
6
7
8
9
10
//标准提到,一个promise只有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)//已完成
Promise.prototype.then(); //已完成
Promise.prototype.catch();
Promise.prototype.finally();
Promise.all();
Promise.race();
Promise.allSettled();
Promise.any();
Promise.resolve();
Promise.reject();

#Promise.prototype.catch()

据官方文档所知:

Promise.prototype.catch方法是.then(null, rejection)或.then(undefined, rejection)的别名,用于指定发生错误时的回调函数。
可以理解为,Promise中,使用reject来汇报结果的,可以在.then的第二个方法中执行,如果有reject,则执行reject,否则执行.catch,我们稍微修改一下上一期的方法中,
myPromise中的doCallback方法,判断一下,如果没有传入.reject则调用.catch方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
self.doCallback=function(){//执行回调函数
let callBackArr = []
if(self.status == 'resolved'){//取构造函数中保存的data,传入callback方法里
callBackArr = self.callbackObj.resolveCallback;
}else if(self.status == 'rejected'){
if(self.callbackObj.rejectCallBack[0]){
callBackArr = self.callbackObj.rejectCallBack;
}else{
callBackArr = [self.callbackObj.catchCallBack];
}
}
if(callBackArr&&callBackArr.length>0){
callBackArr.forEach((item)=>{
item(self.data)
})
}
}

还需要为myPromise来补一个catch的回调

1
2
3
myPromise.prototype.catch=function(catchCallBack){
this.callbackObj.catchCallBack=catchCallBack;
}

现在我们发现.catch方法已经可以正式调通了

1
2
3
4
5
6
7
8
9
10
11
12
13
new myPromise((resolve,reject)=>{
reject('reject')
}).catch((data)=>{
console.log(data,'catch');//reject,catch
})

new myPromise((resolve,reject)=>{
reject('reject')
}).then((data)=>{
console.log(data,'catch');
}).catch((data)=>{
console.log(data,'catch');//Cannot read property 'catch' of undefined
})

如此,我们便完成了.then、.catch相关的东西啦

当前全部的代码是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
function myPromise(callback) {
var self = this;
self.status = 'pending';//创建当前状态为pending
self.data = null;//此变量为保存成功状态的数据使用
self.callbackObj = {};//回调对象,用于存放.then中的回调
self.doCallback=function(){//执行回调函数
let callBackArr = []
if(self.status == 'resolved'){//取构造函数中保存的data,传入callback方法里
callBackArr = self.callbackObj.resolveCallback;
}else if(self.status == 'rejected'){
if(self.callbackObj.rejectCallBack[0]){
callBackArr = self.callbackObj.rejectCallBack;
}else{
callBackArr = [self.callbackObj.catchCallBack];
}
}
if(callBackArr&&callBackArr.length>0){
callBackArr.forEach((item)=>{
item(self.data)
})
}
}
function resolve(value) {//声明resolve方法,支持报成功
if(self.status === 'pending') {
self.status = 'resolved';
self.data = value;
self.doCallback()
}
}
function reject(value) {
if(self.status === 'pending') {
self.status = 'rejected';
self.data = value;
self.doCallback()
}
}
setTimeout(function(){
callback&&callback(resolve,reject);
})
}
//根据es6文档,此处的promise,原型链上需要增加一个.then方法,来支持调用结果后,执行的方法,此方法也接收一个回调函数
myPromise.prototype.then = function(resolveCallback,rejectCallBack){//.then存入待执行事件,不然如果是异步操作,则未完成时候.then就执行了
this.callbackObj.resolveCallback?this.callbackObj.resolveCallback.push(resolveCallback):this.callbackObj.resolveCallback=[resolveCallback];
this.callbackObj.rejectCallBack?this.callbackObj.rejectCallBack.push(rejectCallBack):this.callbackObj.rejectCallBack=[rejectCallBack];
return this
}
myPromise.prototype.catch=function(catchCallBack){
this.callbackObj.catchCallBack=catchCallBack;
}
//此时,myPromise便支持了使用resolve和reject汇报调用结果,且使用.then方法接收结果数据
new myPromise((resolve,reject)=>{
console.log(1)
resolve('resolved')
}).then((data)=>{
console.log(data,'then1')
}).then((data)=>{
console.log(data,'then2')
}).then((data)=>{
console.log(data,'then3')
}).then((data)=>{
console.log(data,'then4')
})