reject(‘some string’)与reject(new Error(‘some string’))

reject如果用await不try…catch会让程序崩溃。

  1. async handleBtnClick() {
  2.   function testPromise() {
  3.     return new Promise((resolve, reject) => {
  4.       setTimeout(() => {
  5.         // reject('promise reject error');
  6.         reject(new Error('promise reject new Error'));
  7.       }, 200);
  8.     });
  9.   }
  10.   const res = await testPromise();
  11.   console.log(res, 'after--------');
  12. }
  14. // print

image.png
image.png
Note

  • reject会让await程序中断，下边的console不会再执行，无论是reject(‘some string’)还是reject(new Error(‘some string’))
    • 相比于reject(‘some string’)，reject(new Error(‘some string’))会提示错误的位置。

      处理reject导致await中断方案

      async handleBtnClick() {
function testPromise() {
return new Promise((resolve, reject) => {
 setTimeout(() => {
   // reject('promise reject error');
   reject(new Error('promise reject new Error'));
 }, 200);
});
}
// method1 .then
// testPromise().then(() => {});
// method2 try...catch包裹await
// try {
//   const res = await testPromise();
// } catch (error) {
//   console.log('catch error------', error);
// }
const res = await testPromise().catch((err) => {
console.log('await catch-----', err);
});
console.log('after--------');
},

      method1 promise.then

      用.then，promise.then错误发生在内部不会影响到外部，但promise.then还是会产生多层嵌套，相比于回调函数没有什么大的改进。
      image.png

      method2 try…catch 包裹await

      每一个await都需要包裹一个四行的try…catch，繁琐low。
      image.png

      method3 用await.catch()

      amaizing！居然还可以这样。看起来像是一个最终的解决方案。
      摘取自这里
      image.png
      但这个错误被await后边的catch捕获了后边的逻辑照样执行…
      如果第十行不用throw，则错误被第八行catch捕获，第九行，第十三行都会提示一个message
      throw 击穿调用栈promise展示
      async function clickBtn() {
function p() {
return new Promise((rv, rj) => {
 rj(new Error('error'));
});
}
console.log('await before');
const res = await p().catch((err) => {
message.error('hehe');
throw err;
});
message.success('hehe');
console.log('after----');
}