处理 Javascript/Typescript 中的错误:自定义异常和结果

处理 javascript/typescript 中的错误:自定义异常和结果

诸如调用 api 或验证用户输入的数据之类的操作在开发中非常常见,并且是可以给出正确结果或失败的函数的示例。一般来说,为了在 javascript(和其他语言)中控制它,我们通常使用并创建简单的异常。

它们似乎是控制我们正在开发的应用程序或程序可能出现的错误的最简单方法。然而,随着项目和团队的成长,开始出现需要我们做更多事情的场景。例如,在大型团队中,如果功能在指示它们是否可能失败时是明确的,那么这将有很大帮助,以便我们的同事能够预测和管理这些错误。

明确操作可能出现的“错误”类型不仅有助于使开发变得更加容易。它还将作为业务规则的文档。

在 javascript 中,我们有一些技术来实现这一点。为了超越理论,让我们考虑一个现实生活中的例子:在酒店预订应用程序中,用户预订房间,收到代码,然后必须付款。付款时,api 目前可以向我们展示以下 3 种“错误”场景:

el código de reserva no existe.el pago es rechazado.el código de reserva ya no es válido.

当我们为用户制作应用程序时,除了这两种情况外,您还应该考虑额外的一种情况:

立即学习“Java免费学习笔记(深入)”;

no hay conexión a internet. (o el servicio no esta disponible)

可以从应用程序的不同组件调用此函数,如果失败,必须向用户显示错误。

考虑到这个例子,让我们回顾一下如何处理它的一些可能性

自定义错误

异常在许多语言中都很常见,javascript 包含一些预定义的异常(例如 syntaxerror)。在处理可能的错误时,一个好的做法是具体化并个性化它们。

在 js 中创建异常只需使用保留字 throw 后跟我们想要的任何内容(如果你是这么读的话)。

function makeerror() {  throw "error string"}

从这个意义上说,js 是非常宽容的,但是抛出不是 js 中的 error 类的后代的东西被认为是不好的做法。

class myerror extends error {  constructor(message) {    super(message);    this.name = "myerror";  }}function makeerror() {  throw myerror("")}

如您所见,错误类带有一个属性,它允许我们更详细地描述为什么我们要创建异常(并且我们可以添加我们想要的属性)。

回到我们举的例子的问题。通过应用自定义错误,我们可以控制在每种情况下要做什么。

class codeinvalid extends error {/*...*/}class paymentrejected extends error {/*...*/}class codeexpired extends error {/*...*/}class rederror extends error {/*...*/}async function apitransaction(code) {  try {     const r = await fetch(/* url */)     const response = await r.json()     ....     if (response.message === "code invalid") {         throw new codeinvalid()     }     // agregar más casos     return response  } catch (e) {    throw new rederror()  }}async function payreservation(code) {  try {     const paydata = await apitransaction(code)     showresulttouser(paydata)     return  } catch (e) {    if (e instanceof codeinvalid) {      showmessagetocodeinvalid()      return    } else if (e instanceof paymentrejected) {      // ...    } else if (e instanceof codeexpired) {      // ...         } else (e instanceof rederror) {      // ...    }     throw e  }}

通过这个,我们不仅能够以不同的方式路由流程,而且还可以区分系统的内部错误(例如,我们在 payreservation 等中使用的某些内部依赖项的错误)与代表业务规则的错误。

这是一个非常好的选择,它满足了我们根据每种情况控制流程的目标,如果有人看到这个函数,他们就知道为什么它会失败。这样我们已经收获很多,但是使用这种方法我们必须考虑一些事情。

如果函数的异常未在 catch 内控制,则会进入“更高级别”。举个例子,如果你有函数 a,它调用 b,这又调用 c 并且 c 抛出异常. 受控制的这将转到 b,如果 b 不控制它,则继续直到 a 等。根据您的情况,这可能是个好消息。通过业务规则声明可能的错误最终可能会很乏味,因为必须检查所有功能是否存在可能的异常。

另一点需要考虑的是今天非常重视的开发者到期。尽管像 jsdoc 这样的工具允许您描述添加方法可能有异常,但编辑器无法识别它。另一方面,typescript 在编写或调用函数时无法识别这些异常。

[] **性能:* 抛出和处理异常对性能有(最小)影响(类似于使用 break)。尽管在像应用程序这样的环境中,影响几乎为零。

使用值 result(或 either)封装错误

如果我们看一下前面的案例,我们创建的异常并不是由于“无法修复”的错误,而是业务规则的一部分。当异常变得普遍时,它们就不再是真正的异常情况,而是为此而设计的。我们可以将“成功”和“错误”状态封装在单个对象中,而不是抛出异常,如下所示。

const responsemodel = {  isok: true,  data: {},  errorname: ''}

如果我们使用 typescript(或 d.ts 使用 jsdoc),我们可以像这样定义类型。

type response = okresponse | errorresponseinterface okresponse { isok: true, data: t}interface errorresponse {  isok: false,  errorname: n}

将其应用到我们的示例中。如果现在我们的 payreservation 函数返回此对象而不是异常,则使用 jsdoc 或 typescript 我们可以指定可以采用的结果类型(从现在开始,为了简单起见,我将把示例放在 typescript 中)。
这有助于团队提前了解函数可能返回哪些错误。

type apitransactionresponse = responsefunction apitransaction(code: number) : promise {  //...}async function payreservation(code) {   const paydata = await apitransaction(code)  if (paydata.isok) {     showresulttouser(paydata)  } else if (paydata.errorname === 'codeinvalid') {    showmessagetocodeinvalid()    return  } else if (paydata.errorname === 'paymentrejected') {    // ...  } else if (paydata.errorname === 'codeinvalid') {    // ...       } else (paydata.errorname === 'rederror') {    // ...  }}

通过应用此方法,我们获得了该方法(有例外情况)的优点,并且在开发时,编辑器将显示有关可能发生的不同“错误”情况的信息。

事实上,这种类型的概念在编程中已经存在很长时间了,在许多函数式语言中他们没有例外,他们使用这种类型的数据来处理错误,今天许多语言都实现了它。例如,在 rust 和 dart 中,result 类本身就存在,kotlin arrow 库也添加了它。

关于如何使用和实现结果有一定的标准,这样我们的代码对于新开发人员来说更容易理解,我们可以依赖这些约定。

结果可以专门表示成功或错误状态(不能同时是两种状态),并且允许在不抛出异常的情况下使用这两种状态。

class result () {  #isok = true  get value() {    return this.#value  }  get error() {    return this.#error  }  get isok() {    return this.#isok  }  get iserror() {    return this.#iserror  }  constructor(value, isok : boolean) {    if ( isok) {      this.#value = value    } else {      this.#error = value    }    this.#isok = isok  }  static ok(value: t) : result {    return new result(value, true)  }  static error(error: e) : result {    return new result(value, false)  }}

该示例使用类,但不是必需的,还有更简单的实现,我通常将一个实现带到我认为可能需要它的项目中,我留下链接以防您想查看它和/或使用它。

如果我们就这样保留它,那么相对于我们之前创建的对象,我们就不会获得太多收益。这就是为什么很高兴知道它通常实现更多方法

例如,在发生错误时返回默认值的 getorelse 方法。

class result () {  //...  function getorelse(defvalue: r) {    if (this.isok) {      return this.#value    }    return defvalue  }  //...}

并折叠以功能性地处理成功/失败流程。

class result () {  //...  function fold(fnok: (arg: r) => any, fnerror: (arg: e) => any) {    if (this.isok) {      return fnok(this.value)    }    return fnerror(this.error)  }  //...}

您还可以使用 either 找到有关错误处理的信息。结果将是具有更大上下文的 either,either 的值为右 () 和左 ()。正如英语中的 right 也用来表示某件事是正确的,它通常具有正确的值,而错误在左侧,但情况不一定如此,结果相对于这是正确值和错误值。

将其应用到我们的示例中,payreservation 看起来像这样:

type apitransactionresponse = resultfunction apitransaction(code: number) : promise {  //...  return new result.ok(paymentdata) // or ...  return new result.error(descriptionerror)}async function payreservation(code) {   const paydataresult = await apitransaction(code)  return paydataresult.fold(    (paydata) => { return showresulttouser(paydata) },    (e) => {      if (e === 'codeinvalid') {        return showmessagetocodeinvalid()      } else if (e === 'paymentrejected') {        //...      } else if (e === 'codeexpired') {        //...      } else if (e === 'rederror') {        //...      }     }  )}

[*] 一个好的做法是为错误建立一个基本数据类型,在示例中使用字符串,但理想情况下它应该有一个更定义的形式,例如可以添加更多数据的命名对象,例如,你可以在这里看到一个例子

乍一看,添加类似乎比其他任何事情都更加过度设计。但结果是一个广泛使用的概念,维护约定可以帮助您的团队更快地捕获它,并且是加强错误处理的有效方法。

使用此选项,我们明确描述函数可能出现的“错误”,我们可以根据错误类型控制应用程序的流程,我们在调用函数时从编辑器获得帮助,最后我们留下错误异常系统中的案例。

尽管有这些优点,但在实施之前还必须考虑一些要点。正如我在本节开头提到的,result 在许多语言中都是原生的,但在 js 中却不是,因此通过实现它,我们添加了一个额外的抽象。另一点需要考虑的是我们所处的场景,并非所有应用程序都需要如此多的控制(例如,在广告活动的登陆页面上,我看不到实现结果的意义)。是否可以充分利用所有潜力是值得评估的,否则只是额外的负担。

简而言之,处理错误不仅可以提高代码质量,还可以通过提供可预测且记录良好的工作流程来提高团队协作。结果和自定义异常是工具,如果使用得当,有助于提高代码的可维护性和健壮性。

ts 中的额外内容

在 typescript 中,我们可以从 result 中获得额外的好处,以确保涵盖所有错误情况:

function typeCheck(_:never) {}async function payReservation(code) {   const payDataResult = await apiTransaction(code)  return payDataResult.fold(    (payData) => { return showResultToUser(payData) },    (e) => {      if (e === 'CodeInvalid') {        return showMessageToPartnerError()      } elseif (e === 'PaymentRejected') {        //...      } elseif (e === 'CodeExpired') {        //...      } elseif (e === 'RedError') {        //...      }  else {        typeCheck(e)      }    }  )}

typecheck 函数旨在验证 if/else if 中检查了 e 的所有可能值。
在此存储库中,我留下了更多细节。

以上就是处理 Javascript/Typescript 中的错误:自定义异常和结果的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1498610.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 20:36:21
下一篇 2025年12月19日 20:36:31

相关推荐

  • CSS mask属性无法获取图片:为什么我的图片不见了?

    CSS mask属性无法获取图片 在使用CSS mask属性时,可能会遇到无法获取指定照片的情况。这个问题通常表现为: 网络面板中没有请求图片:尽管CSS代码中指定了图片地址,但网络面板中却找不到图片的请求记录。 问题原因: 此问题的可能原因是浏览器的兼容性问题。某些较旧版本的浏览器可能不支持CSS…

    2025年12月24日
    900
  • Uniapp 中如何不拉伸不裁剪地展示图片?

    灵活展示图片:如何不拉伸不裁剪 在界面设计中,常常需要以原尺寸展示用户上传的图片。本文将介绍一种在 uniapp 框架中实现该功能的简单方法。 对于不同尺寸的图片,可以采用以下处理方式: 极端宽高比:撑满屏幕宽度或高度,再等比缩放居中。非极端宽高比:居中显示,若能撑满则撑满。 然而,如果需要不拉伸不…

    2025年12月24日
    400
  • 如何让小说网站控制台显示乱码,同时网页内容正常显示?

    如何在不影响用户界面的情况下实现控制台乱码? 当在小说网站上下载小说时,大家可能会遇到一个问题:网站上的文本在网页内正常显示,但是在控制台中却是乱码。如何实现此类操作,从而在不影响用户界面(UI)的情况下保持控制台乱码呢? 答案在于使用自定义字体。网站可以通过在服务器端配置自定义字体,并通过在客户端…

    2025年12月24日
    600
  • 如何在地图上轻松创建气泡信息框?

    地图上气泡信息框的巧妙生成 地图上气泡信息框是一种常用的交互功能,它简便易用,能够为用户提供额外信息。本文将探讨如何借助地图库的功能轻松创建这一功能。 利用地图库的原生功能 大多数地图库,如高德地图,都提供了现成的信息窗体和右键菜单功能。这些功能可以通过以下途径实现: 高德地图 JS API 参考文…

    2025年12月24日
    400
  • 如何使用 scroll-behavior 属性实现元素scrollLeft变化时的平滑动画?

    如何实现元素scrollleft变化时的平滑动画效果? 在许多网页应用中,滚动容器的水平滚动条(scrollleft)需要频繁使用。为了让滚动动作更加自然,你希望给scrollleft的变化添加动画效果。 解决方案:scroll-behavior 属性 要实现scrollleft变化时的平滑动画效果…

    2025年12月24日
    000
  • 如何为滚动元素添加平滑过渡,使滚动条滑动时更自然流畅?

    给滚动元素平滑过渡 如何在滚动条属性(scrollleft)发生改变时为元素添加平滑的过渡效果? 解决方案:scroll-behavior 属性 为滚动容器设置 scroll-behavior 属性可以实现平滑滚动。 html 代码: click the button to slide right!…

    2025年12月24日
    500
  • 为什么设置 `overflow: hidden` 会导致 `inline-block` 元素错位?

    overflow 导致 inline-block 元素错位解析 当多个 inline-block 元素并列排列时,可能会出现错位显示的问题。这通常是由于其中一个元素设置了 overflow 属性引起的。 问题现象 在不设置 overflow 属性时,元素按预期显示在同一水平线上: 不设置 overf…

    2025年12月24日 好文分享
    400
  • 网页使用本地字体:为什么 CSS 代码中明明指定了“荆南麦圆体”,页面却仍然显示“微软雅黑”?

    网页中使用本地字体 本文将解答如何将本地安装字体应用到网页中,避免使用 src 属性直接引入字体文件。 问题: 想要在网页上使用已安装的“荆南麦圆体”字体,但 css 代码中将其置于第一位的“font-family”属性,页面仍显示“微软雅黑”字体。 立即学习“前端免费学习笔记(深入)”; 答案: …

    2025年12月24日
    000
  • 如何选择元素个数不固定的指定类名子元素?

    灵活选择元素个数不固定的指定类名子元素 在网页布局中,有时需要选择特定类名的子元素,但这些元素的数量并不固定。例如,下面这段 html 代码中,activebar 和 item 元素的数量均不固定: *n *n 如果需要选择第一个 item元素,可以使用 css 选择器 :nth-child()。该…

    2025年12月24日
    200
  • 使用 SVG 如何实现自定义宽度、间距和半径的虚线边框?

    使用 svg 实现自定义虚线边框 如何实现一个具有自定义宽度、间距和半径的虚线边框是一个常见的前端开发问题。传统的解决方案通常涉及使用 border-image 引入切片图片,但是这种方法存在引入外部资源、性能低下的缺点。 为了避免上述问题,可以使用 svg(可缩放矢量图形)来创建纯代码实现。一种方…

    2025年12月24日
    100
  • 如何让“元素跟随文本高度,而不是撑高父容器?

    如何让 元素跟随文本高度,而不是撑高父容器 在页面布局中,经常遇到父容器高度被子元素撑开的问题。在图例所示的案例中,父容器被较高的图片撑开,而文本的高度没有被考虑。本问答将提供纯css解决方案,让图片跟随文本高度,确保父容器的高度不会被图片影响。 解决方法 为了解决这个问题,需要将图片从文档流中脱离…

    2025年12月24日
    000
  • 为什么我的特定 DIV 在 Edge 浏览器中无法显示?

    特定 DIV 无法显示:用户代理样式表的困扰 当你在 Edge 浏览器中打开项目中的某个 div 时,却发现它无法正常显示,仔细检查样式后,发现是由用户代理样式表中的 display none 引起的。但你疑问的是,为什么会出现这样的样式表,而且只针对特定的 div? 背后的原因 用户代理样式表是由…

    2025年12月24日
    200
  • inline-block元素错位了,是为什么?

    inline-block元素错位背后的原因 inline-block元素是一种特殊类型的块级元素,它可以与其他元素行内排列。但是,在某些情况下,inline-block元素可能会出现错位显示的问题。 错位的原因 当inline-block元素设置了overflow:hidden属性时,它会影响元素的…

    2025年12月24日
    000
  • 为什么 CSS mask 属性未请求指定图片?

    解决 css mask 属性未请求图片的问题 在使用 css mask 属性时,指定了图片地址,但网络面板显示未请求获取该图片,这可能是由于浏览器兼容性问题造成的。 问题 如下代码所示: 立即学习“前端免费学习笔记(深入)”; icon [data-icon=”cloud”] { –icon-cl…

    2025年12月24日
    200
  • 为什么使用 inline-block 元素时会错位?

    inline-block 元素错位成因剖析 在使用 inline-block 元素时,可能会遇到它们错位显示的问题。如代码 demo 所示,当设置了 overflow 属性时,a 标签就会错位下沉,而未设置时却不会。 问题根源: overflow:hidden 属性影响了 inline-block …

    2025年12月24日
    000
  • 如何利用 CSS 选中激活标签并影响相邻元素的样式?

    如何利用 css 选中激活标签并影响相邻元素? 为了实现激活标签影响相邻元素的样式需求,可以通过 :has 选择器来实现。以下是如何具体操作: 对于激活标签相邻后的元素,可以在 css 中使用以下代码进行设置: li:has(+li.active) { border-radius: 0 0 10px…

    2025年12月24日
    100
  • 为什么我的 CSS 元素放大效果无法正常生效?

    css 设置元素放大效果的疑问解答 原提问者在尝试给元素添加 10em 字体大小和过渡效果后,未能在进入页面时看到放大效果。探究发现,原提问者将 CSS 代码直接写在页面中,导致放大效果无法触发。 解决办法如下: 将 CSS 样式写在一个单独的文件中,并使用 标签引入该样式文件。这个操作与原提问者观…

    2025年12月24日
    000
  • 如何模拟Windows 10 设置界面中的鼠标悬浮放大效果?

    win10设置界面的鼠标移动显示周边的样式(探照灯效果)的实现方式 在windows设置界面的鼠标悬浮效果中,光标周围会显示一个放大区域。在前端开发中,可以通过多种方式实现类似的效果。 使用css 使用css的transform和box-shadow属性。通过将transform: scale(1.…

    2025年12月24日
    200
  • 为什么我的 em 和 transition 设置后元素没有放大?

    元素设置 em 和 transition 后不放大 一个 youtube 视频中展示了设置 em 和 transition 的元素在页面加载后会放大,但同样的代码在提问者电脑上没有达到预期效果。 可能原因: 问题在于 css 代码的位置。在视频中,css 被放置在单独的文件中并通过 link 标签引…

    2025年12月24日
    100
  • 为什么我的 Safari 自定义样式表在百度页面上失效了?

    为什么在 Safari 中自定义样式表未能正常工作? 在 Safari 的偏好设置中设置自定义样式表后,您对其进行测试却发现效果不同。在您自己的网页中,样式有效,而在百度页面中却失效。 造成这种情况的原因是,第一个访问的项目使用了文件协议,可以访问本地目录中的图片文件。而第二个访问的百度使用了 ht…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信