当前位置:首页 > 文章列表 > 文章 > 前端 > JavaScript 中错误和异常的区别

JavaScript 中错误和异常的区别

来源:dev.to 2024-11-26 10:34:03 0浏览 收藏

哈喽!大家好,很高兴又见面了,我是golang学习网的一名作者,今天由我给大家带来一篇《JavaScript 中错误和异常的区别》,本文主要会讲到等等知识点,希望大家一起学习进步,也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧!

JavaScript 中错误和异常的区别

https://github.com/ray-d-song

错误和异常是从实践中诞生的概念,旨在处理“可编程错误”。

错误

从代码角度来看,错误往往会被手动精确处理。

例如,fna 调用 fnb 和 fnc。两种方法都可能遇到错误,处理代码大致如下:

function fna() {
  const { err: berr, res: bres } = fnb()
  if (berr) {
    // ...
    // error handling
  }

  const { err: cerr, res: cres } = fnc()
  if (cerr) {
    // ...
    // error handling
  }
  // normal logic
}

“错误”的关键是从函数返回一个对象或数组,其中一个字段代表“发生错误”。只要该字段不为空,程序员就知道正常流程已被中断。

javascript 有一个内部 error 对象和构造函数,但表示错误的字段不需要是 error 对象。相反,error 对象更常用于异常处理。

例外

我们已经有了错误处理,为什么还需要异常?

想象一个场景,你有一个按钮。当按钮被点击时,会触发函数a,经过多层调用(可能是10层),函数x出现错误。你不想告诉用户“未知错误”,而是想提供有关问题所在的具体信息。

你可以通过错误实现这个效果,但是你需要写十次这样的代码:

function fna() {
  const { err, res } = fnb()
  if (err) {
    // display error to user
    showerr(err)
  }
}

function fnb() {
  const { err, res } = fnc()
  if (err)
    // propagate error
    return { err, null }
}

// ... 10 similar passes

function fny() {
  const { err, res } = fnx()
  if (err)
    // propagate error
    return { err, null }
}

这种样板代码效率很低。更好的方法是使用异常。

只需要在fny发生错误时抛出异常即可。在顶层,你可以抓住它。

function fna() {
  try {
    fnb()
  } catch (e) {
    showerr(e)
  }
}

// ...

function fny() {
  const { err, res } = fnx()
  if (err)
    // 抛出
    throw err
}

这样,无论哪里发生错误,都可以在顶层捕获,并且其他层的代码不受影响。

避免一处错误污染整个代码结构。

为什么要区分两者呢?

我们已经解释了为什么需要异常,但是为什么需要区分错误和异常呢?

最好的做法是严格区分两者。如果错误不需要逐层向上传递,则应直接在当前层进行处理。例如fnc的错误不需要在fna中使用,所以应该直接在b中作为错误处理。

假设所有错误都在顶层处理,那么所有逻辑都堆积在顶层的catch块中,很难维护。

function main() {
  try {
    task1()
    task2()
    task3()
  } catch(e) {
    switch(e) {
      case "type A":
        //...
        break;
      case "type B":
        //...
        break;
      case "type C":
        //...
        break;
    }
  }
}

以上就是本文的全部内容了,是否有顺利帮助你解决问题?若是能给你带来学习上的帮助,请大家多多支持golang学习网!更多关于文章的相关知识,也可关注golang学习网公众号。

版本声明
本文转载于:dev.to 如有侵犯,请联系study_golang@163.com删除
再次中标!众合科技今年智慧交通领域累计中标额22.27亿元再次中标!众合科技今年智慧交通领域累计中标额22.27亿元
上一篇
再次中标!众合科技今年智慧交通领域累计中标额22.27亿元
如何使用 Python 对 CSV 文件特定行内数据进行排序并写入新文件?
下一篇
如何使用 Python 对 CSV 文件特定行内数据进行排序并写入新文件?
查看更多
最新文章
2. CSS 样式使用 ::after 伪元素来在图片上叠加文字: .im">
文章 · 前端   |  4小时前  |  
图片
2. CSS 样式使用 ::after 伪元素来在图片上叠加文字: .im">CSS图片上叠加文字的实现方法,主要通过使用伪元素(如 ::after)来在图片上方添加内容。以下是详细步骤和示例代码:1. HTML 结构假设你有一个包含图片的容器,结构如下:
图片
2. CSS 样式使用 ::after 伪元素来在图片上叠加文字: .im
318浏览 收藏
查看更多
课程推荐
查看更多
AI推荐
查看更多
相关文章
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码