不要在代码中随便使用try...catch了

创作时间:

作者:

@小白创作中心

不要在代码中随便使用try...catch了

引用

CSDN

https://blog.csdn.net/weixin_43288600/article/details/136622300

在JavaScript开发中，try...catch语句是处理异常的重要工具。然而，它并非万能，特别是在处理异步代码时存在一些常见的误区。本文将通过一个面试场景，深入探讨try...catch的工作原理及其在异步代码中的局限性，并提供相应的解决方案。

背景

在一次面试中，面试官提出了以下代码：

try {
  setTimeout(() => {
    throw new Error('err');
  }, 200);
} catch (err) {
  console.log(err);
}

以及

try {
  Promise.resolve().then(() => {
    throw new Error('err');
  });
} catch (err) {
  console.log(err);
}

初看之下，这似乎是一个简单的try...catch错误处理场景，但其中暗藏玄机。

JavaScript中的try...catch

JavaScript中的try...catch主要用于捕获代码中的异常，防止应用程序崩溃。其基本语法如下：

try {
  // 可能会抛出异常的代码
} catch(error) {
  // 处理所有异常的代码
}

然而，try...catch并不能捕获所有的异常，要正确使用它，需要理解其运行机制。

try...catch运行机制

当程序运行到try...catch代码块时：

如果未报错，则会忽略catch中的代码
若报错，则不执行try报错内容后面的代码，转而执行catch中的代码

总结来说，只有当错误发生在try...catch代码块内部且线程正在执行该代码块时，try...catch才能捕获到异常。

JavaScript的事件循环机制

JavaScript是单线程语言，其执行机制基于事件循环：

所有同步任务都在主线程上执行，形成一个执行栈
在执行同步任务时，如果遇到异步事件，会将该任务挂起，继续执行同步任务。异步事件完成后（如定时器到期、AJAX请求返回），对应的回调会被加入到任务队列中等待执行，任务队列分为宏任务队列和微任务队列
当执行栈中的同步任务执行完毕后，会执行所有微任务，清空微任务队列
当所有微任务执行完毕后，再去执行宏任务队列中的下一个宏任务，不断循环，直到所有任务完成

这一套流程就是JavaScript的事件循环机制。

错误原因

回到前面的代码示例，问题在于try...catch无法捕获异步错误。try...catch是同步执行的，而setTimeout和Promise.resolve()分别是宏任务和微任务，都是异步任务。当这些异步任务的回调进入事件队列时，主线程已经离开了try...catch代码块，因此try...catch无法捕获这些异步错误。

解决方法

要正确处理异步错误，可以在同步任务中使用try...catch，利用Promise和async/await的异常处理能力。

对于第一个示例：

new Promise((resolve, reject) => {
  setTimeout(() => {
    try {
      throw new Error('err');
    } catch (err) {
      reject(err);
    }
  }, 200); 
})
.then(() => {
  // 处理成功执行的情况
})
.catch((err) => {
  console.log(err); // 错误在这里被捕获
});

对于第二个示例：

// 方法一：使用Promise链式调用
Promise.resolve()
  .then(() => {
    throw new Error('err');
  })
  .catch((err) => {
    console.log(err); // 错误在这里被捕获
  });

// 方法二：使用async/await
async function handleError() {
  try {
    await Promise.resolve().then(() => {
      throw new Error('err');
    });
  } catch (err) {
    console.log(err); // 错误在这里被捕获
  }
}
handleError();