Promise中then的两个参数与catch的介绍

JS中的Promise一共有三种状态,分别为pending(等待)、fulfilled(成功)、rejected(失败),
Promise的状态同一时间只能为一种状态。

1.Promise只能由Pending转化为fulfilled或者rejected,fulfilled与rejected不能相互转化

var pro=new Promise((resolve,reject)=>{
    resolve();
    reject();
})
pro.then(()=>{
    console.log('resolve1');
},()=>{console.log('reject1')}).catch(()=>{
    console.log('catch1')
})
//输出结果为resolve1
var pro=new Promise((resolve,reject)=>{
    reject();
    resolve();
})
pro.then(()=>{
    console.log('resolve1');
},()=>{console.log('reject1')}).catch(()=>{
    console.log('catch1')
})
//输出reject1

如果then添加了第二个参数,这时候就不会执行catch里面的代码

2.Promise中的then不添加第二个参数,这时候就会执行catch里面的代码

var pro=new Promise((resolve,reject)=>{
    // resolve();
    reject();
})
pro.then(()=>{
    console.log('resolve1');
}).catch(()=>{
    console.log('catch1')
})
//catch1

3.Promise的链式结构

Promise的链式结构原理是pro.then()或pro.catch()这个函数执行的返回值会返回一个promise对象,所以可以继续调用then或者catch,来完成链式结构。

var pro=new Promise((resolve,reject)=>{
    resolve();
    reject();
})
pro.then(()=>{
    console.log('resolve1');
},()=>{console.log('reject1')}).catch(()=>{
    console.log('catch1')
}).then(()=>{
    console.log('resolve2');
},()=>{console.log('reject2')}).catch(()=>{
    console.log('catch2');
}).then(()=>{
    console.log('resolve3');
})
//输出resolve1 resolve2 resolve3

但是有个重点是"promise执行完毕后返回的promise默认进入fulfilled状态",所以执行完毕后默认执行链式结构中的resolve回调。

var pro=new Promise((resolve,reject)=>{
    // resolve();
    reject();
})
pro.then(()=>{
    console.log('resolve1');
},()=>{console.log('reject1')}).catch(()=>{
    console.log('catch1')
}).then(()=>{
    console.log('resolve2');
},()=>{console.log('reject2')}).catch(()=>{
    console.log('catch2');
}).then(()=>{
    console.log('resolve3');
})
//reject1 resolve2 resolve3

执行进入失败状态后,链式结构也会执行之后的resolve回调。

var pro=new Promise((resolve,reject)=>{
    resolve();
    reject();
})
pro.then(()=>{
    console.log('resolve1');
},()=>{console.log('reject1')).catch(()=>{
    console.log('catch1')
}).catch(()=>{
    console.log('catch2');
})
//输出结果 resolve1

如果不存在then,则也不会执行catch里面的代码,因为默认进入fullfilled状态。需要记住的点是,进入什么状态就会什么代码。

4.then里面的resolve报错,catch是可以捕获报错信息,then的第二个参数不能捕获

var pro=new Promise((resolve,reject)=>{
    resolve();
    reject();
})
pro.then(()=>{
    console.log('resolve1');
    var a = undefined;
    a.b();
    console.log('报错了的代码');
},(err)=>{console.log('reject1',err)}).catch((err)=>{
    console.log('catch1',err);
}).then(()=>{
    console.log('resolve2');
}).catch(()=>{
    console.log('catch2');
})

在这里插入图片描述
可以看到,resolve的回调执行报错可以被catch捕获到

5.Promise里面执行的代码可以被then的第二个参数捕获到,并且不会进入到resolve,而是直接进入reject

var pro=new Promise((resolve,reject)=>{
    var a = undefined;
    a.b();
    resolve();
    reject();
})
pro.then(()=>{
    console.log('resolve1');
    console.log('报错了的代码');
},(err)=>{console.log('reject1',err)}).catch((err)=>{
    console.log('catch1',err);
}).then(()=>{
    console.log('resolve2');
}).catch(()=>{
    console.log('catch2');
})

在这里插入图片描述
没有执行resolve代码,直接进入了reject

var pro=new Promise((resolve,reject)=>{
    var a = undefined;
    a.b();
    resolve();
    console.log('报错了的代码reject之前');
    // reject();
    console.log('报错了的代码reject之后');
})
pro.then(()=>{
    console.log('resolve1');
    console.log('报错了的代码');
},(err)=>{console.log('reject1',err)}).catch((err)=>{
    console.log('catch1',err);
}).then(()=>{
    console.log('resolve2');
}).catch(()=>{
    console.log('catch2');
})

在这里插入图片描述
就算没有reject回调,还是会进入reject回调
如果不存在then的第二个回调,则会进入catch

var pro=new Promise((resolve,reject)=>{
    var a = undefined;
    a.b();
    resolve();
    console.log('报错了的代码reject之前');
    reject();
    console.log('报错了的代码reject之后');
})
pro.then(()=>{
    console.log('resolve1');
    console.log('报错了的代码');
}).catch((err)=>{
    console.log('catch1',err);
}).then(()=>{
    console.log('resolve2');
}).catch(()=>{
    console.log('catch2');
})

在这里插入图片描述
如果catch的执行过程中报错,则进入之后相邻的catch

var pro=new Promise((resolve,reject)=>{
    var a = undefined;
    a.b();
    resolve();
    console.log('报错了的代码reject之前');
    reject();
    console.log('报错了的代码reject之后');
})
pro.then(()=>{
    console.log('resolve1');
    console.log('报错了的代码');
}).catch((err)=>{
    var a = undefined;
    a.b();
    console.log('catch1',err);
}).then(()=>{
    console.log('resolve2');
}).catch(()=>{
    console.log('catch2');
})

在这里插入图片描述
未完待续。。。。。。。。。。

发布了16 篇原创文章 · 获赞 2 · 访问量 2104

猜你喜欢

转载自blog.csdn.net/py_boy/article/details/104721946