compilation error错误是什么原因_了解如何使用Try,Throw,Catch和Last处理JavaScript错误...

ab39d2594291a0815a8b151e5517e6e0.png

Javascript中的错误

错误是不可避免的。他们发生了。在本文中,我们将使用try和catch探索JavaScript中的基本错误处理。

打开您的开发人员工具控制台和代码:

  • Chrome: Ctrl + Shift + J or Cmd + Opt + J (Mac).
  • Firefox: Ctrl + Shift + K or Cmd + Opt + K on (Mac).

Try & Catch语法

我们首先来看一下try和catch语法。基本上我们创建了两个代码块。第一个包含我们将尝试的代码。第二个块用于捕获和处理任何潜在的错误:

try { // 正常处理}catch(error) { // 处理任何潜在错误的代码}

第一个错误

错误可能由于许多原因而发生。为了看看它是什么样的,我们将用拼写错误创建自己的东西。

为了说明这个错误,我们将使用alert()方法。 alert()方法使用指定的方法在浏览器中创建弹出窗口。

首先,让我们创建一个成功的警报。在控制台中键入以下内容:

alert("It is a lovely day");
0331c2e9db1388a45ee615bd9addd80d.png

我们将“意外地”命名我们的方法警报。复制以下代码,看看会发生什么:

alerting("It is a lovely day");
a99f3a394813100ffbd2664e89cfde57.png

我们得到此错误的原因是因为alerting()方法不存在。通过“意外地”给它错误的名称,我们试图引用一个未定义的函数 - 因此,错误就此诞生了。

好的,但真正发生了什么?

当JavaScript中发生运行时错误时,将创建并抛出一个新的Error对象。此错误对象最多可以包含三个属性:错误,发生错误的文件名以及包含错误的行号。

捕获我们的语法错误

考虑到所有这些,我们可以使用try和catch块来捕获上面的引用错误。我们将使用上面相同的拼写错误代码,这次将它放在try块中。我们将在catch块中调用我们返回的Error对象。这是代码的样子:

try { alerting("It is a lovely day");}catch(error) { console.log(error);}

当我们在浏览器中运行时,我们得到:

58f1d240bd569fc9f08fbebf9af83905.png

虽然结果看起来很相似,但根本不是。我们所做的是控制我们的错误。我们不是让浏览器处理我们的错误,而是自己处理它。我们甚至可以根据错误生成自定义操作。例如,我们可以提醒自定义文本,而不是记录错误:

try { alerting("It is a lovely day");}catch(error) { alert("Uh, Oh, Error");}

结果是:

665958ec15cc147d75f895684c7c35a6.png

现在,对于调试或开发人员来说,这并没有那么有用。但在我看来,当涉及到用户的自定义错误消息时,try和catch真的很闪耀。

是时候Throw

Throw允许我们抛出自己的错误并指定错误的名称和消息。这是一个例子:

throw new Error('Yeah... Sorry');

我们可以在try catch块中使用throw,看看会发生什么。请注意,我已将catch中的参数名称更改为e。这个参数可以命名我们想要的任何东西,我刚刚选择了e,因为它是错误的简称:

try { throw new Error('Yeah... Sorry');}catch(e) { console.log(e);}

这是我们得到的:

375b20bb3825d111c5b6f3fcfe9a8290.png

我们现在用throw创建了自己的错误,并使用catch自己处理它。

Finally… Finally

Finally!我们终于可以探索了。

Finally代表一个代码块,我们可以在try和catch结束后用来执行代码。最终将运行是否抛出错误。 这是完整语法的样子:

try { // Code that we will 'try'}catch(error) { // Code that handles any potential errors}finally { // Code that will run at the end}

为了说明最终代码无论如何都运行,我们可以尝试运行两个不同的代码示例。在第一个,我们将抛出一个错误。在第二个中,不会抛出任何错误:

错误:

try { throw new Error('Yeah... Sorry');}catch(e) {}finally { console.log('finally running');}// finally running

现在没有错误:

try {}catch(e) {}finally { console.log('finally running');}// finally running

如您所见,这两个代码都导致我们的finally块运行,并且最终运行到控制台。

把它们放在一起

这是一个简单的例子,我使用try throw catch,最后在一个代码块中:

在我们的try块中,我们将要求用户在弹出窗口中键入“hello”。如果输入任何其他内容,我们会抛出错误。我们的catch阻止向用户发出此错误警告,最后我们捕获它。这是代码:

try { let hello = prompt("Type hello"); if (hello !== 'hello'){ throw new Error("Oops, you didn't type hello"); }}catch(e) { alert(e.message);}finally { alert('thanks for playing!');}

关键要点

  • try —  尝试的代码可能会产生错误
  • catch —  将处理任何错误的代码
  • throw —  您可以用来抛出自己的自定义错误的关键字
  • finally —  无论结果如何,将在try/catch块之后运行的代码
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值