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

创作时间:

作者:

@小白创作中心

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

引用

CSDN

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

背景

在一次面试中，面试官提出了一个关于try...catch的问题，这个问题揭示了try...catch在处理异步错误时的局限性。让我们来看一下具体的代码示例：

示例1：

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

示例2：

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代码块中的代码抛出异常，则会立即停止执行try代码块中剩余的代码，并转而执行catch代码块中的代码。

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

JavaScript的事件循环机制

JavaScript是单线程语言，其执行机制基于事件循环。事件循环的基本流程如下：

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

错误原因

回到前面的代码示例，现在可以理解为什么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();