因为一道try...catch的题,我的面试挂掉了

说到try...catch都觉得非常熟悉了,不就是用来捕捉代码块中的错误嘛,平时也用得比较多的。然而因为了解不够多,我的面试却栽在了一个简单的知识点上:try...catch只能捕捉到同步执行代码块中的错误。 题目是:以下代码有错吗?如果有错,应该如何改正?

js 复制代码
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不能异步捕获代码错误,因为它本身就是一个同步代码块。所以看到这道题我就懵了,平时代码不就是这样写的吗,用try...catch来捕获错误,所以当时就直接回了我不知道,感觉没有啥错误。。。,面试官无奈的看了我一眼,下来可以了解一下,然后就没有然后了。

下来我就赶紧查了资料,才知道try...catch不能异步捕获代码错误。在JavaScript中,setTimeout是一个异步函数,它的回调函数会在指定的延时后被放入事件队列,等待当前执行栈清空后才执行。因此,当setTimeout的回调函数执行并抛出错误时,try...catch已经执行完毕,无法捕捉到异步回调中的错误。

正确的做法是在异步操作中直接处理错误,例如使用回调函数、Promises或者async/await结合try...catch

js 复制代码
new Promise((resolve, reject) => {
  setTimeout(() => {
    try {
      throw new Error('err');
    } catch (err) {
      reject(err);
    }
  }, 200);
})
  .then(() => {
    // 正常执行时的处理逻辑
  })
  .catch((err) => {
    console.log(err); // 这里会捕捉到错误
  });

至于第二个例子,尝试使用try...catch来捕捉一个在Promise链中抛出的错误。这种方式同样是无效的,因为try...catch不能捕捉到在Promise链中的异步错误。

Promise对象用于表示一个异步操作的最终完成(或失败),及其结果值。一个Promise的状态可能是以下几种:

  • Pending(等待态) :初始状态,既不是成功,也不是失败状态。
  • Fulfilled(成功态) :意味着操作成功完成。
  • Rejected(失败态) :意味着操作失败。

在Promise中抛出一个错误(例如通过throw语句)会导致Promise被拒绝(或失败)。要正确处理这个错误,需要在Promise链中使用.catch方法或者在一个async函数中使用try...catch

js 复制代码
// 方法一
Promise.resolve()
  .then(() => {
    throw new Error('err');
  })
  .catch((err) => {
    console.log(err); // 这里会捕捉到错误
  });

// 方法二
async function handleError() {
  try {
    await Promise.resolve().then(() => {
      throw new Error('err');
    });
  } catch (err) {
    console.log(err); // 这里会捕捉到错误
  }
}

handleError();
相关推荐
腾讯TNTWeb前端团队1 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
uhakadotcom4 小时前
视频直播与视频点播:基础知识与应用场景
后端·面试·架构
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom6 小时前
快速开始使用 n8n
后端·面试·github
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js:基础知识及应用场景
前端·面试·github