作者：Ashish Lahoti
译者：前端⼩智
来源：codingnconcept
最近开源了⼀个 Vue 组件，还不够完善，欢迎⼤家来⼀起完善它，也希望⼤家能给个 star ⽀持⼀下，谢谢各位了。
今天的内容中，我们来学习⼀下使⽤try、catch、finally和throw进⾏错误处理。我们还会讲⼀下 JS 中内置的错误对象(Error, SyntaxError, ReferenceError等)以及如何定义⾃定义错误。
1.使⽤ try…catch…finally…throw
在 JS 中处理错误，我们主要使⽤try、catch、finally和throw关键字。
try块包含我们需要检查的代码
关键字throw⽤于抛出⾃定义错误
catch块处理捕获的错误
finally 块是最终结果⽆论如何，都会执⾏的⼀个块，可以在这个块⾥⾯做⼀些需要善后的事情
1.1 try
每个try块必须与⾄少⼀个catch或finally块，否则会抛出SyntaxError错误。
我们单独使⽤try块进⾏验证：
try {
throw new Error('Error while executing the code');
}
Uncaught SyntaxError: Missing catch or finally after try
1.atch
建议将try与catch块⼀起使⽤，它可以优雅地处理try块抛出的错误。
try {
throw new Error('Error while executing the code');
} catch (err) {
<(ssage);
}
➤  Error while executing the code
1.2.atch与⽆效代码
try {
~!$%^&*
} catch(err) {
console.log("这⾥不会被执⾏");
}
➤  Uncaught SyntaxError: Invalid or unexpected token
1.2.atch与异步代码
同样，atch⽆法捕获在异步代码中引发的异常，例如setTimeout：
try {
setTimeout(function() {
noSuchVariable;  // undefined variable
}, 1000);
} catch (err) {
console.log("这⾥不会被执⾏");
}
未捕获的ReferenceError将在1秒后引发:
➤  Uncaught ReferenceError: noSuchVariable is not defined
所以 ，我们应该在异步代码内部使⽤ atch 来处理错误：
setTimeout(function() {
try {
noSuchVariable;
} catch(err) {
console.log("error is caught here!");
}
}, 1000);
1.2.3 嵌套atch
我们还可以使⽤嵌套的try和catch块向上抛出错误，如下所⽰：
try {
try {
throw new Error('Error while executing the inner code');
} catch (err) {
throw err;
parse error怎么解决
}
} catch (err) {
console.log("Error caught by outer block:");
<(ssage);
}
Error caught by outer block:
➤  Error while executing the code
1.3 try..finally
不建议仅使⽤ try..finally ⽽没有 catch 块，看看下⾯会发⽣什么：
try {
throw new Error('Error while executing the code');
} finally {
console.log('finally');
}
finally
➤  Uncaught Error: Error while executing the code
这⾥注意两件事：
即使从try块抛出错误后，也会执⾏finally块
如果没有catch块，错误将不能被优雅地处理，从⽽导致未捕获的错误
1.atch..finally
建议使⽤atch块和可选的finally块。
try {
console.log("Start of try block");
throw new Error('Error while executing the code');
console.log("End of try block -- never reached");
} catch (err) {
<(ssage);
} finally {
console.log('Finally block always run');
}
console.log("Code execution outside try-catch-finally block continue..");
Start of try block
➤  Error while executing the code
Finally block always run
Code execution outside try-catch-finally block continue..
这⾥还要注意两件事：
在try块中抛出错误后往后的代码不会被执⾏了
即使在try块抛出错误之后，finally块仍然执⾏
finally块通常⽤于清理资源或关闭流，如下所⽰：
try {
openFile(file);
readFile(file);
} catch (err) {
<(ssage);
} finally {
closeFile(file);
}
1.5 throw
throw语句⽤于引发异常。
throw <expression>
// throw primitives and functions
throw "Error404";
throw 42;
throw true;
throw {toString: function() { return "I'm an object!"; } };
// throw error object
throw new Error('Error while executing the code');
throw new SyntaxError('Something is wrong with the syntax');
throw new ReferenceError('Oops..Wrong reference');
/
/ throw custom error object
function ValidationError(message) {
this.name = 'ValidationError';
}
throw new ValidationError('Value too high');
2. 异步代码中的错误处理
对于异步代码的错误处理可以Promise和async await。
2.1 Promise 中的atch
我们可以使⽤then()和catch()链接多个 Promises，以处理链中单个 Promise 的错误，如下所⽰：
.
then(res => {
console.log(res);  // 打印 '1'
throw new Error('something went wrong');  // throw error
solve(2);  // 这⾥不会被执⾏
})
.then(res => {
// 这⾥也不会执⾏，因为错误还没有被处理
console.log(res);
})
.catch(err => {
<(ssage);  // 打印 'something went wrong'
solve(3);
})
.then(res => {
console.log(res);  // 打印 '3'
})
.catch(err => {
// 这⾥不会被执⾏
<(err);
})
我们来看⼀个更实际的⽰例，其中我们使⽤fetch调⽤API，该 API 返回⼀个promise对象，我们使⽤catch块优雅地处理 API 失败。
function handleErrors(response) {
if (!response.ok) {
throw Error(response.statusText);
}
return response;
}
fetch("httpstat.us/500")
.then(handleErrors)
.then(response => console.log("ok"))
.catch(error => console.log("Caught", error));
Caught Error: Internal Server Error
at handleErrors (<anonymous>:3:15)
2.atch和async await
在 async await 中 使⽤atch ⽐较容易：
(async function() {
try {
await fetch("httpstat.us/500");
} catch (err) {
<(ssage);
}
})();
让我们看同⼀⽰例，其中我们使⽤fetch调⽤API，该API返回⼀个promise对象， 我们使⽤atch块优雅地处理API失败。
function handleErrors(response) {
if (!response.ok) {
throw Error(response.statusText);
}
}
(async function() {
try {
let response = await fetch("httpstat.us/500");
handleErrors(response);
let data = await response.json();
return data;
} catch (error) {
console.log("Caught", error)
}
})();
Caught Error: Internal Server Error
at handleErrors (<anonymous>:3:15)
at <anonymous>:11:7
3. JS 中的内置错误
3.1 Error
JavaScript 有内置的错误对象，它通常由try块抛出，并在catch块中捕获，Error 对象包含以下属性：name：是错误的名称，例如 “Error”, “SyntaxError”, “ReferenceError” 等。
message：有关错误详细信息的消息。
stack：是⽤于调试⽬的的错误的堆栈跟踪。
我们创建⼀个Error 对象，并查看它的名称和消息属性:
const err = new Error('Error while executing the code');
console.log("name:", err.name);
console.log("message:", ssage);
console.log("stack:", err.stack);
name: Error
message: Error while executing the code
stack: Error: Error while executing the code
at <anonymous>:1:13
JavaScript 有以下内置错误，这些错误是从 Error 对象继承⽽来的
3.2 EvalError
EvalError 表⽰关于全局eval()函数的错误，这个异常不再由 JS 抛出，它的存在是为了向后兼容。3.3 RangeError
当值超出范围时，将引发RangeError。
➤ [].length = -1
Uncaught RangeError: Invalid array length
3.4 ReferenceError
当引⽤⼀个不存在的变量时，将引发 ReferenceError。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。