一个try...catch失误,我与19万美元年薪擦肩而过!

大家好,我是芝士,今天给大家一个因为try...catch 问题导致面试失败的经历。
以下是国外一个小伙分享的面试失败经历,总结的内容。

我参加了一次前端开发工程师的技术面试,岗位年薪大约为19万美元,不幸的是,我因为一个try...catch的面试问题错误而失败了。让我告诉你这个问题是什么,也许它也能帮助你。

在JavaScript中,try...catch结构通常被视为一种安全网,是代码块中意外错误的守护者。包括我自己在内的许多开发者,都在同步上下文中自信地使用它。然而,面试中的一个看似无害的问题打破了我的自满,揭示了我在理解上的一个盲点:try...catch只能捕获同步代码块中的错误。

面试中让我栽跟头的问题其实非常简单,但却极具欺骗性:

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

以及

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

我一头雾水,愣住了。这些片段怎么会有问题呢?毕竟,这不是编码中的常见模式吗?这清楚地提醒我们这句格言:熟悉滋生自满。

思考

面试后,怀着谦卑的心态,我深入研究了try...catch的细微差别。一次顿悟来势汹涌:由于其同步操作方式,try...catch无法有效处理异步错误。在JavaScript中,setTimeout是一个经典的异步函数,它将回调函数安排到事件队列中,使其与try...catch块的执行分离开来。

解决方案

要应对这种限制,我们必须在异步上下文中对错误处理进行范式转变。正确的方法是通过回调、Promise或现代的async/await语法直接将错误处理集成到异步操作中。

思考第一个代码片段的修正版本:

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

对于第二个片段:

js 复制代码
// 方法一:使用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();

这些修改后的实现,展示了在异步场景中处理错误的方法,利用了Promiseasync/await的内在能力。

从面试失败到觉醒, 发现在不断变化的软件开发领域中,持续学习和谦卑的重要性。拥抱JavaScript中错误处理的细微差别不仅丰富了我们的理解,还使我们能够编写更健壮、更具弹性的代码。

因此,各位开发者同仁,让我们不要回避面对自己的误区。因为正是在承认自己的弱点中,才能铺就了精通技术的道路。

欢迎关注公众号《前端界》,文章会同步更新,也可快速加入前端交流群!

readmedium.com/zh/i-failed...

相关推荐
清幽竹客17 分钟前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim17 分钟前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿21 分钟前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年21 分钟前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
夏梦春蝉1 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室2 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子3 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W5 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端6 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~6 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js