![ab39d2594291a0815a8b151e5517e6e0.png](https://i-blog.csdnimg.cn/blog_migrate/7fba8a7e3923cd1a3f1f24cd7d043d3c.jpeg)
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](https://i-blog.csdnimg.cn/blog_migrate/aee961b08483dafed3adea7eafc891f3.jpeg)
我们将“意外地”命名我们的方法警报。复制以下代码,看看会发生什么:
alerting("It is a lovely day");
![a99f3a394813100ffbd2664e89cfde57.png](https://i-blog.csdnimg.cn/blog_migrate/0b36c4589dea50c67d9ce50097a298b9.jpeg)
我们得到此错误的原因是因为alerting()方法不存在。通过“意外地”给它错误的名称,我们试图引用一个未定义的函数 - 因此,错误就此诞生了。
好的,但真正发生了什么?
当JavaScript中发生运行时错误时,将创建并抛出一个新的Error对象。此错误对象最多可以包含三个属性:错误,发生错误的文件名以及包含错误的行号。
捕获我们的语法错误
考虑到所有这些,我们可以使用try和catch块来捕获上面的引用错误。我们将使用上面相同的拼写错误代码,这次将它放在try块中。我们将在catch块中调用我们返回的Error对象。这是代码的样子:
try { alerting("It is a lovely day");}catch(error) { console.log(error);}
当我们在浏览器中运行时,我们得到:
![58f1d240bd569fc9f08fbebf9af83905.png](https://i-blog.csdnimg.cn/blog_migrate/62541f9f3146a666d0148350faf6069b.jpeg)
虽然结果看起来很相似,但根本不是。我们所做的是控制我们的错误。我们不是让浏览器处理我们的错误,而是自己处理它。我们甚至可以根据错误生成自定义操作。例如,我们可以提醒自定义文本,而不是记录错误:
try { alerting("It is a lovely day");}catch(error) { alert("Uh, Oh, Error");}
结果是:
![665958ec15cc147d75f895684c7c35a6.png](https://i-blog.csdnimg.cn/blog_migrate/050564e188732d746dbfac5eb518102b.jpeg)
现在,对于调试或开发人员来说,这并没有那么有用。但在我看来,当涉及到用户的自定义错误消息时,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](https://i-blog.csdnimg.cn/blog_migrate/23326a38d92659ac78eb82078f506a7a.jpeg)
我们现在用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块之后运行的代码