好的代码是预防性地防止程序中的错误崩溃的代码,而不是优雅地处理这些错误,比如从错误中恢复,通知用户或在某个地方记录错误。
让我们简要介绍一下如何使用 try...catch,然后再看看 try...catch...最后以及投放声明来扔出我们自己的自定义错误。
抓...抓
以下是 try...catch 的基本语法:
1try {
2 // some code that my error-out
3} catch (e) {
4 // this will run only if the code in the try block errors-out
5}
注意捕获块如何访问错误对象(在上面的示例中,‘e’)。错误对象将具有一个名称和一个消息属性.在大多数环境中,错误对象也将有一个堆栈属性,而堆栈跟踪导致错误。
如果您将错误对象登录到控制台,它的名称和消息属性将 方便地连接在一起。
以下是我们错误编写变量名称的例子:
1let myVariable = 2;
2try {
3 console.log(myVriable + 77);
4} catch (e) {
5 console.log('Oopsies -', e);
6}
在这种情况下,将执行 ** catch** 块,并在控制台上打印下列信息:
1Oopsies - ReferenceError: myVriable is not defined
<$>[警告] try...catch 只处理在运行时遇到的错误,并且错误的 JavaScript 会在分析时出现错误,所以你的程序根本不会运行。
抛弃定制错误
通常,而不是捕捉纯粹的JavaScript错误,我们会想捕捉我们程序中遇到的条件,这些情况应该被认为是错误。
1let myVariable = prompt('Give me a number');
2
3try {
4 if (isNaN(+myVariable)) {
5 // throws if the value provided can't be coerced to a number
6 throw new Error('Not a number!');
7 }
8 console.log('Good choice', myVariable);
9} catch (e) {
10 console.log(e);
11}
使用上面的示例,如果我们不输入可以强制给一个数字的值,我们会抛出一个自定义错误,然后被我们的 ** catch** 条款捕获。
您还可以看到,我们使用 Error constructor来创建一个错误对象,以自定义消息传输为第一个参数. 在这种情况下,我们的错误对象将有错误的名称,但我们也可以产生特定错误类型:
1try {
2 if (isNaN(+myVariable)) {
3 throw new TypeError('Not a number!');
4 }
5 console.log('Good choice', myVariable);
6} catch (e) {
7 console.log(e);
8}
重现错误
一个好的编码实践是只捕捉并处理我们所期望的错误,然后重新处理其他错误,以便一个潜在的家长尝试捕捉:
1let myVariable = prompt('Give me a number');
2
3try {
4 if (isNaN(+myVariable)) {
5 throw new TypeError('Not a number!');
6 }
7 console.log('Good choice', myVariable);
8} catch (e) {
9 if (e.name === 'TypeError') {
10 console.log(e);
11 } else {
12 throw e;
13 }
14}
使用上面的例子,如果在 ** try** 条款中遇到与我们的 TypeError 不同的错误,我们的 ** catch** 条款将重复使用我们将设置的母试... catch 构造来处理的错误。
试试,抓,终于
您还可以打击最终的区块,以确保某些代码运行,无论 ** try**中的代码是否阻断错误:
1let myVariable = 2;
2try {
3 console.log(myVriable + 77);
4} catch (e) {
5 console.log('Oopsies -', e);
6} finally {
7 console.log('Runs no matter what');
8}
最后的区块可以用来清理你的代码。
试试,终于
像 最后一样, ** catch** 条款是可选的,如果您想要的话,您可以使用 try...最后确保某些代码在遇到错误时运行。
在这里,例如,我们试图将背景颜色设置为不存在的元素。
1try {
2 document.querySelector('.not-there').style.backgroundColor = 'pink';
3} catch (e) {
4 console.log('Oh no -', e);
5} finally {
6 console.log('Finally runs');
7}
8console.log('After try block');
9
10// Oh no - TypeError: Cannot read property 'style' of null
11// Finally runs
12// After try block
现在只用试试......最后:
1try {
2 document.querySelector('.here2').style.backgroundColor = 'pink';
3} finally {
4 console.log('Finally runs');
5}
6console.log('After try block');
7
8// Finally runs
9// Uncaught TypeError: Cannot read property 'style' of null
请注意,当 ** catch ** 条款缺失时,错误不会被捕获,程序会崩溃,但只有在我们 ** 最后 ** 条款中运行代码后。