try..catch 不能捕获的错误有哪些？注意事项又有哪些？-世界杯皮肤-世界杯预选赛南美区_世界杯俄罗斯

作者：Ashish Lahoti

译者：前端小智

来源：codingnconcept

今天的内容中，我们来学习一下使用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块进行验证：

代码语言：javascript复制try {

throw new Error('Error while executing the code');

}代码语言：javascript复制ⓧ Uncaught SyntaxError: Missing catch or finally after try1.2 try..catch建议将try与catch块一起使用，它可以优雅地处理try块抛出的错误。

代码语言：javascript复制try {

throw new Error('Error while executing the code');

} catch (err) {

console.error(err.message);

}代码语言：javascript复制➤ ⓧ Error while executing the code1.2.1 try..catch 与无效代码try..catch 无法捕获无效的 JS 代码，例如try块中的以下代码在语法上是错误的，但它不会被catch块捕获。

代码语言：javascript复制try {

~!$%^&*

} catch(err) {

console.log("这里不会被执行");

}代码语言：javascript复制➤ ⓧ Uncaught SyntaxError: Invalid or unexpected token1.2.2 try..catch 与异步代码同样，try..catch无法捕获在异步代码中引发的异常，例如setTimeout：

代码语言：javascript复制try {

setTimeout(function() {

noSuchVariable; // undefined variable

}, 1000);

} catch (err) {

console.log("这里不会被执行");

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

代码语言：javascript复制➤ ⓧ Uncaught ReferenceError: noSuchVariable is not defined所以，我们应该在异步代码内部使用 try..catch 来处理错误：

代码语言：javascript复制setTimeout(function() {

try {

noSuchVariable;

} catch(err) {

console.log("error is caught here!");

}

}, 1000);1.2.3 嵌套 try..catch我们还可以使用嵌套的try和catch块向上抛出错误，如下所示：

代码语言：javascript复制try {

try {

throw new Error('Error while executing the inner code');

} catch (err) {

throw err;

}

} catch (err) {

console.log("Error caught by outer block:");

console.error(err.message);

}代码语言：javascript复制Error caught by outer block:

➤ ⓧ Error while executing the code1.3 try..finally不建议仅使用 try..finally 而没有 catch 块，看看下面会发生什么：

代码语言：javascript复制try {

throw new Error('Error while executing the code');

} finally {

console.log('finally');

}代码语言：javascript复制finally

➤ ⓧ Uncaught Error: Error while executing the code这里注意两件事：

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

代码语言：javascript复制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) {

console.error(err.message);

} finally {

console.log('Finally block always run');

}

console.log("Code execution outside try-catch-finally block continue..");代码语言：javascript复制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块通常用于清理资源或关闭流，如下所示：

代码语言：javascript复制try {

openFile(file);

readFile(file);

} catch (err) {

console.error(err.message);

} finally {

closeFile(file);

}1.5 throwthrow语句用于引发异常。

代码语言：javascript复制throw 代码语言：javascript复制// 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.message = message;

this.name = 'ValidationError';

}

throw new ValidationError('Value too high');2. 异步代码中的错误处理对于异步代码的错误处理可以Promise和async await。

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

代码语言：javascript复制Promise.resolve(1)

.then(res => {

console.log(res); // 打印 '1'

throw new Error('something went wrong'); // throw error

return Promise.resolve(2); // 这里不会被执行

})

.then(res => {

// 这里也不会执行，因为错误还没有被处理

console.log(res);

})

.catch(err => {

console.error(err.message); // 打印 'something went wrong'

return Promise.resolve(3);

})

.then(res => {

console.log(res); // 打印 '3'

})

.catch(err => {

// 这里不会被执行

console.error(err);

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

代码语言：javascript复制function handleErrors(response) {

if (!response.ok) {

throw Error(response.statusText);

}

return response;

}

fetch("http://httpstat.us/500")

.then(handleErrors)

.then(response => console.log("ok"))

.catch(error => console.log("Caught", error));代码语言：javascript复制Caught Error: Internal Server Error

at handleErrors (:3:15)2.2 try..catch 和 async await在 async await 中使用 try..catch 比较容易：

代码语言：javascript复制(async function() {

try {

await fetch("http://httpstat.us/500");

} catch (err) {

console.error(err.message);

}

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

代码语言：javascript复制function handleErrors(response) {

if (!response.ok) {

throw Error(response.statusText);

}

(async function() {

try {

let response = await fetch("http://httpstat.us/500");

handleErrors(response);

let data = await response.json();

return data;

} catch (error) {

console.log("Caught", error)

}

})();代码语言：javascript复制Caught Error: Internal Server Error

at handleErrors (:3:15)

at :11:73. JS 中的内置错误3.1 ErrorJavaScript 有内置的错误对象，它通常由try块抛出，并在catch块中捕获，Error 对象包含以下属性：

name：是错误的名称，例如 “Error”, “SyntaxError”, “ReferenceError” 等。message：有关错误详细信息的消息。stack：是用于调试目的的错误的堆栈跟踪。我们创建一个Error 对象，并查看它的名称和消息属性:

代码语言：javascript复制const err = new Error('Error while executing the code');

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

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

console.log("stack:", err.stack);代码语言：javascript复制name: Error

message: Error while executing the code

stack: Error: Error while executing the code

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

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

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

代码语言：javascript复制➤ [].length = -1

ⓧ Uncaught RangeError: Invalid array length3.4 ReferenceError当引用一个不存在的变量时，将引发 ReferenceError。

代码语言：javascript复制➤ x = x + 1;

ⓧ Uncaught ReferenceError: x is not defined3.5 SyntaxError当你在 JS 代码中使用任何错误的语法时，都会引发SyntaxError。

代码语言：javascript复制➤ function() { return 'Hi!' }

ⓧ Uncaught SyntaxError: Function statements require a function name

➤ 1 = 1

ⓧ Uncaught SyntaxError: Invalid left-hand side in assignment

➤ JSON.parse("{ x }");

ⓧ Uncaught SyntaxError: Unexpected token x in JSON at position 23.6 TypeError如果该值不是预期的类型，则抛出TypeError。

代码语言：javascript复制➤ 1();

ⓧ Uncaught TypeError: 1 is not a function

➤ null.name;

ⓧ Uncaught TypeError: Cannot read property 'name' of null3.7 URIError如果以错误的方式使用全局 URI 方法，则会抛出URIError。

代码语言：javascript复制➤ decodeURI("%%%");

ⓧ Uncaught URIError: URI malformed4. 定义并抛出自定义错误我们也可以用这种方式定义自定义错误。

代码语言：javascript复制class CustomError extends Error {

constructor(message) {

super(message);

this.name = "CustomError";

}

};

const err = new CustomError('Custom error while executing the code');

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

console.log("message:", err.message);代码语言：javascript复制name: CustomError

message: Custom error while executing the code我们还可以进一步增强CustomError对象以包含错误代码

代码语言：javascript复制class CustomError extends Error {

constructor(message, code) {

super(message);

this.name = "CustomError";

this.code = code;

}

};

const err = new CustomError('Custom error while executing the code', "ERROR_CODE");

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

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

console.log("code:", err.code);代码语言：javascript复制name: CustomError

message: Custom error while executing the code

code: ERROR_CODE在try..catch块中使用它：

代码语言：javascript复制try{

try {

null.name;

}catch(err){

throw new CustomError(err.message, err.name); //message, code

}

}catch(err){

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

}CustomError TypeError Cannot read property 'name' of null