JavaScript 关于async、await怎样合理的使用try、catch去处理(分享)

1. 只使用 Promise

// Promise.prototype.catch()
// 会直接捕获 rejected 状态的值
new Promise((resolve, reject) => {
  resolve("ok")
}).then((res) => { 
  console.log(res) // ok
  return Promise.reject("no")
}).then((res) => {
  console.log(res)
}).catch((err) => {
  console.log(err) // no
})

2. 配合 async、await 使用

// 1. 这种情况的 rejected 状态无法捕获
async function test() {
  // await 只会接收 fulfilled 状态的值
  let a = await Promise.resolve("ok")
  console.log(a)
  // rejected 状态会抛出
  let b = await Promise.reject("no")
  console.log(b)
} // Uncaught (in promise) no

test()

// 2. 由于 async 函数返回的也是一个 Promise
// 所以可以直接使用 catch 去捕获
test().catch((err) => {
  console.log(err) // no
})

3. 结合 try、catch

// 1. 当 try、catch 在 async、await 外面时，无法捕获 Promise 中 rejected 的状态
// 可以看到并没有捕获
try {
  (async () => {
    let a = await Promise.resolve("成功了");
    console.log(a); // 成功了
    throw new Error("出错了"); // Uncaught (in promise) Error: 出错了
  )();
} catch (e) {
  console.log(e);
}

// 2. 当try、catch 在 await 外面 async 里面时，可以捕获 rejected 的状态
// 这是因为 await 会把 Promise 的异常抛出，async 和 try 其实都是具有处理异常的效果
// async 是改变自身状态为 rejected
// try 是直接捕获代码异常
(async () => {
  try {
    await Promise.reject("出错了");
  } catch (e) {
    console.log(e); // 出错了
  }
})();

// 3. 使用 Promise.prototype.catch() 去处理
// 可以捕获 rejected 的状态，也可以捕获抛出的异常 
(async () => {
  let a = await Promise.resolve("成功了");
  console.log(a);  // 成功了
  throw new Error("出错了");
})().catch((err) => {
  console.log(err); // Error: 出错了
});

4. unhandledrejection 事件

window.addEventListener("unhandledrejection", function (event) {
  event.preventDefault(); // 阻止控制台未处理的 reject 状态
  event.reason // 异常信息，如果是抛出的错误，会返回堆栈信息，对应的哪一行
  event.promise.catch((err) => {
    console.log(err); // 也是异常信息
  });
});

总结：

1. 为什么 try、catch 不能捕获包含async/await 中的异常可以看一下之前文章中的 Promise 的实现 点击跳转
2. 还有很重要的一点 Promise.prototype.finally()，这个是无论成功与否都会执行，这样在 then 和 catch 中就不用写两套一样的代码了
3. 我最开始使用 async/await 时是直接 try/catch 去包裹使用，但是今天写demo发现写的位置不一样会存在捕获优先级的问题
4. 如果有其他建议的可以评论区留言