try-catch-promise错误捕获

写这篇博客的原因,基于在别的地方看见别人说用try-catch捕获promise错误,而本人不解,try怎么能捕获到异步promise的错误呢,于是有了下面本人的一些尝试与理解。

了解promise的catch捕获的错误,与如何用try catch去捕获promise的错误

1. 简单回顾promise

  • promise是一个构造函数,于是你可以new
  • promise有两个回调函数,resolve:表示成功,reject:表示失败
  • promise的状态:pending、resolve、reject。(这里区分上面的回调函数,下面例子讲述区别)
  • promise是异步操作,异步执行的成功与失败,会调用内部上面的两个回调函数来返回结果出来。
  • 不能return把操作结果输出,需要利用回调函数
  • promise的prototype的属性上面有then和finally、catch方法。

2.使用tyr-catch去了解promise异步错误问题

  • 提醒:try 是捕获代码错误,这个代码必须是代码还在try线程里的时候才能捕获到。而如果是异步函数,异步函数会进入队列,这个时候代码已经离开try的这个主线程,所以try是捕获不到异步代码的错误的。
  • 定义一个promise对象,后续例子以它做实验。
const abc = type => {
  return new Promise((resolve, reject) => {
    if (type === 2) {
      resolve('错误了')
    } else {
      reject('reject错误')
    }
  })
}
  • 由于promise是微任务,错误reject会在链式的catch捕获到。
  • 而try-catch是去捕获同步任务的错误。
  • 当想用try-catch捕获错误
1. 情况一 pending–>reject()–> reject状态,异步,try捕获不到错误
try{ abc(4,2,3) } catch(error){ console.log(error,'error错误')}

结果:

Promise {: 'reject错误'}
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "reject错误"
2. 情况二 pendign–>reject()—>reject,使用await实现promise阻塞同步效果,try捕获到代码错误
try{ await abc(4,2,3) } catch(error){ console.log(error,'error错误')}

结果:reject错误 error错误

3. 情况三 pending–>reslove()–>reslove状态,异步、try捕获不到问题
try{ abc(2)} catch(error){ console.log(error,'error错误')}

结果:

Promise {: '错误了'}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "错误了"

上述例子额外讲解

1、上面的错误例子,可以改promise对象再更加精进一些,比如跳出then,手动return reject,或者throw new Error()等
2、await 是处理promise 才会有同步等待效果,类似定时器这样的异步函数,用await就不会有同步效果的。

try-catch-promise 结论

当你想用try catch去捕获promise 错误的时候,
1、当promise本身代码报错,
2、或者这个与reject无关的错误。
3、或者你return reject错误,反映到外部
4、或者你用await同步故意去等待错误
5、或者你强行创建一个错误throw new Error()
以上就是大概利用try-catch捕获promise错误的情况。

你可能感兴趣的:(JavaScript,javascript,前端,开发语言)