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

创作时间:

作者:

@小白创作中心

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

引用

CSDN

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

在JavaScript开发中，try...catch语句是处理异常的重要工具。然而，许多开发者可能并不清楚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运行机制

当程序执行到try...catch语句时：

如果try块中的代码没有抛出异常，则会忽略catch块中的代码。
如果try块中的代码抛出异常，则会立即停止执行try块中剩余的代码，并转而执行catch块中的代码。

总结来说，只有当异常在try...catch代码块内部被抛出时，才能被catch捕获。

JavaScript的事件循环机制

要理解try...catch为何无法捕获异步错误，需要先了解JavaScript的事件循环机制。JavaScript是单线程语言，其执行机制主要包括以下几个步骤：

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

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

错误原因

回到前面的代码示例，问题的关键在于try...catch无法捕获异步错误。这是因为：

try...catch是同步执行的。
setTimeout和Promise.resolve()分别是宏任务和微任务，属于异步任务。
当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();