本文已经原作者 Ashish Lahoti 授权翻译。

今天的内容中，我们来学习一下使用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{
thrownewError('Errorwhileexecutingthecode');
}

ⓧUncaughtSyntaxError:Missingcatchorfinallyaftertry

1.2 try..catch

建议将try与catch块一起使用，它可以优雅地处理try块抛出的错误。

try{
thrownewError('Errorwhileexecutingthecode');
}catch(err){
console.error(err.message);
}

➤ⓧErrorwhileexecutingthecode

1.2.1 try..catch 与无效代码

try..catch 无法捕获无效的 JS 代码，例如try块中的以下代码在语法上是错误的，但它不会被catch块捕获。

try{
~!$%^&*
}catch(err){
console.log("这里不会被执行");
}

➤ⓧUncaughtSyntaxError:Invalidorunexpectedtoken

1.2.2 try..catch 与异步代码

同样，try..catch无法捕获在异步代码中引发的异常，例如setTimeout：

try{
setTimeout(function(){
noSuchVariable;//undefinedvariable
},1000);
}catch(err){
console.log("这里不会被执行");
}

未捕获的ReferenceError将在1秒后引发:

➤ⓧUncaughtReferenceError:noSuchVariableisnotdefined

所以，我们应该在异步代码内部使用 try..catch 来处理错误：

setTimeout(function(){
try{
noSuchVariable;
}catch(err){
console.log("erroriscaughthere!");
}
},1000);

1.2.3 嵌套 try..catch

我们还可以使用嵌套的try和catch块向上抛出错误，如下所示：

try{
try{
thrownewError('Errorwhileexecutingtheinnercode');
}catch(err){
throwerr;
}
}catch(err){
console.log("Errorcaughtbyouterblock:");
console.error(err.message);
}

Errorcaughtbyouterblock:
➤ⓧErrorwhileexecutingthecode

1.3 try..finally

不建议仅使用 try..finally 而没有 catch 块，看看下面会发生什么：

try{
thrownewError('Errorwhileexecutingthecode');
}finally{
console.log('finally');
}

finally
➤ⓧUncaughtError:Errorwhileexecutingthecode

这里注意两件事：

即使从try块抛出错误后，也会执行finally块
如果没有catch块，错误将不能被优雅地处理，从而导致未捕获的错误

1.4 try..catch..finally

建议使用try...catch块和可选的finally块。

try{
console.log("Startoftryblock");
thrownewError('Errorwhileexecutingthecode');
console.log("Endoftryblock--neverreached");
}catch(err){
console.error(err.message);
}finally{
console.log('Finallyblockalwaysrun');
}
console.log("Codeexecutionoutsidetry-catch-finallyblockcontinue..");

Startoftryblock
➤ⓧErrorwhileexecutingthecode
Finallyblockalwaysrun
Codeexecutionoutsidetry-catch-finallyblockcontinue..

这里还要注意两件事：

在try块中抛出错误后往后的代码不会被执行了
即使在try块抛出错误之后，finally块仍然执行

finally块通常用于清理资源或关闭流，如下所示：

try{
openFile(file);
readFile(file);
}catch(err){
console.error(err.message);
}finally{
closeFile(file);
}

1.5 throw

throw语句用于引发异常。

throw<expression>

//throwprimitivesandfunctions
throw"Error404";
throw42;
throwtrue;
throw{toString:function(){return"I'manobject!";}};

//throwerrorobject
thrownewError('Errorwhileexecutingthecode');
thrownewSyntaxError('Somethingiswrongwiththesyntax');
thrownewReferenceError('Oops..Wrongreference');

//throwcustomerrorobject
functionValidationError(message){
this.message=message;
this.name='ValidationError';
}
thrownewValidationError('Valuetoohigh');

2. 异步代码中的错误处理

对于异步代码的错误处理可以Promise和async await。

2.1 Promise 中的 then..catch

我们可以使用then()和catch()链接多个 Promises，以处理链中单个 Promise 的错误，如下所示：

Promise.resolve(1)
.then(res=>{
console.log(res);//打印'1'

thrownewError('somethingwentwrong');//throwerror

returnPromise.resolve(2);//这里不会被执行
})
.then(res=>{
//这里也不会执行，因为错误还没有被处理
console.log(res);
})
.catch(err=>{
console.error(err.message);//打印'somethingwentwrong'
returnPromise.resolve(3);
})
.then(res=>{
console.log(res);//打印'3'
})
.catch(err=>{
//这里不会被执行
console.error(err);
})

我们来看一个更实际的示例，其中我们使用fetch调用API，该 API 返回一个promise对象，我们使用catch块优雅地处理 API 失败。

functionhandleErrors(response){
if(!response.ok){
throwError(response.statusText);
}
returnresponse;
}

fetch("http://httpstat.us/500")
.then(handleErrors)
.then(response=>console.log("ok"))
.catch(error=>console.log("Caught",error));

CaughtError:InternalServerError
athandleErrors(<anonymous>:3:15)

2.2 try..catch 和 async await

在 async await 中使用try..catch 比较容易：

(asyncfunction(){
try{
awaitfetch("http://httpstat.us/500");
}catch(err){
console.error(err.message);
}
})();

让我们看同一示例，其中我们使用fetch调用API，该API返回一个promise对象，我们使用try..catch块优雅地处理API失败。

functionhandleErrors(response){
if(!response.ok){
throwError(response.statusText);
}
}

(asyncfunction(){
try{
letresponse=awaitfetch("http://httpstat.us/500");
handleErrors(response);
letdata=awaitresponse.json();
returndata;
}catch(error){
console.log("Caught",error)
}
})();

CaughtError:InternalServerError
athandleErrors(<anonymous>:3:15)
at<anonymous>:11:7

3. JS 中的内置错误

3.1 Error

JavaScript 有内置的错误对象，它通常由try块抛出，并在catch块中捕获， Error 对象包含以下属性：

name ：是错误的名称，例如 “Error”, “SyntaxError”, “ReferenceError” 等。
message ：有关错误详细信息的消息。
stack ：是用于调试目的的错误的堆栈跟踪。

我们创建一个 Error 对象，并查看它的名称和消息属性:

consterr=newError('Errorwhileexecutingthecode');

console.log("name:",err.name);
console.log("message:",err.message);
console.log("stack:",err.stack);

name:Error
message:Errorwhileexecutingthecode
stack:Error:Errorwhileexecutingthecode
at<anonymous>:1:13

JavaScript 有以下内置错误，这些错误是从 Error 对象继承而来的

3.2 EvalError

EvalError 表示关于全局eval()函数的错误，这个异常不再由 JS 抛出，它的存在是为了向后兼容。

3.3 RangeError

当值超出范围时，将引发RangeError。

➤[].length=-1
ⓧUncaughtRangeError:Invalidarraylength

3.4 ReferenceError

当引用一个不存在的变量时，将引发 ReferenceError 。

➤x=x+1;
ⓧUncaughtReferenceError:xisnotdefined

3.5 SyntaxError

当你在 JS 代码中使用任何错误的语法时，都会引发SyntaxError。

➤function(){return'Hi!'}
ⓧUncaughtSyntaxError:Functionstatementsrequireafunctionname

➤1=1
ⓧUncaughtSyntaxError:Invalidleft-handsideinassignment

➤JSON.parse("{x}");
ⓧUncaughtSyntaxError:UnexpectedtokenxinJSONatposition2

3.6 TypeError

如果该值不是预期的类型，则抛出TypeError。

➤1();
ⓧUncaughtTypeError:1isnotafunction

➤null.name;
ⓧUncaughtTypeError:Cannotreadproperty'name'ofnull

3.7 URIError

如果以错误的方式使用全局 URI 方法，则会抛出URIError。

➤decodeURI("%%%");
ⓧUncaughtURIError:URImalformed

4. 定义并抛出自定义错误

我们也可以用这种方式定义自定义错误。

classCustomErrorextendsError{
constructor(message){
super(message);
this.name="CustomError";
}
};

consterr=newCustomError('Customerrorwhileexecutingthecode');

console.log("name:",err.name);
console.log("message:",err.message);

name:CustomError
message:Customerrorwhileexecutingthecode

我们还可以进一步增强CustomError对象以包含错误代码

classCustomErrorextendsError{
constructor(message,code){
super(message);
this.name="CustomError";
this.code=code;
}
};

consterr=newCustomError('Customerrorwhileexecutingthecode',"ERROR_CODE");

console.log("name:",err.name);
console.log("message:",err.message);
console.log("code:",err.code);

name:CustomError
message:Customerrorwhileexecutingthecode
code:ERROR_CODE

在try..catch块中使用它：

try{
try{
null.name;
}catch(err){
thrownewCustomError(err.message,err.name);//message,code
}
}catch(err){
console.log(err.name,err.code,err.message);
}

CustomError TypeError Cannot read property 'name' of null

我是小智，我们下期见！

作者：Ashish Lahoti 译者：前端小智来源：codingnconcept

原文：https://codings.com/javascript/error-handling-in-javascript/

try catch捕获异常继续执行 (trycatch为什么耗性能)