try..catch 不能捕获的错误有哪些？注意事项又有哪些？ |
您所在的位置：网站首页 › try-catch › try..catch 不能捕获的错误有哪些？注意事项又有哪些？ |
try..catch 不能捕获的错误有哪些？注意事项又有哪些？
|
作者：Ashish Lahoti
译者：前端小智
来源：codingnconcept
点赞再看，微信搜索
【大迁世界】,B站关注【
前端小智】这个没有大厂背景，但有着一股向上积极心态人。本文
GitHub
https://github.com/qq44924588... 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。**
最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。 github 地址：https://github.com/qq44924588... 今天的内容中，我们来学习一下使用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.2 try..catch建议将try与catch块一起使用，它可以优雅地处理try块抛出的错误。 try { throw new Error('Error while executing the code'); } catch (err) { console.error(err.message); } ➤ ⓧ Error while executing the code 1.2.1 try..catch 与 无效代码try..catch 无法捕获无效的 JS 代码，例如try块中的以下代码在语法上是错误的，但它不会被catch块捕获。 try { ~!$%^&* } catch(err) { console.log("这里不会被执行"); } ➤ ⓧ Uncaught SyntaxError: Invalid or unexpected token 1.2.2 try..catch 与 异步代码同样，try..catch无法捕获在异步代码中引发的异常，例如setTimeout： try { setTimeout(function() { noSuchVariable; // undefined variable }, 1000); } catch (err) { console.log("这里不会被执行"); }未捕获的ReferenceError将在1秒后引发: ➤ ⓧ Uncaught ReferenceError: noSuchVariable is not defined所以 ，我们应该在异步代码内部使用 try..catch 来处理错误： setTimeout(function() { try { noSuchVariable; } catch(err) { console.log("error is caught here!"); } }, 1000); 1.2.3 嵌套 try..catch我们还可以使用嵌套的try和catch块向上抛出错误，如下所示： 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); } 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.4 try..catch..finally建议使用try...catch块和可选的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) { console.error(err.message); } 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) { console.error(err.message); } finally { closeFile(file); } 1.5 throwthrow语句用于引发异常。 throw // 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 的错误，如下所示： 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 失败。 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)); Caught Error: Internal Server Error at handleErrors (:3:15) 2.2 try..catch 和 async await在 async await 中 使用 try..catch 比较容易： (async function() { try { await fetch("http://httpstat.us/500"); } catch (err) { console.error(err.message); } })();让我们看同一示例，其中我们使用fetch调用API，该API返回一个promise对象， 我们使用try..catch块优雅地处理API失败。 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) } })(); Caught Error: Internal Server Error at handleErrors (:3:15) at :11:7 3. JS 中的内置错误 3.1 ErrorJavaScript 有内置的错误对象，它通常由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:", err.message); console.log("stack:", err.stack); 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。 ➤ [].length = -1 ⓧ Uncaught RangeError: Invalid array length 3.4 ReferenceError当引用一个不存在的变量时，将引发 ReferenceError。 ➤ x = x + 1; ⓧ Uncaught ReferenceError: x is not defined 3.5 SyntaxError当你在 JS 代码中使用任何错误的语法时，都会引发SyntaxError。 ➤ 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 2 3.6 TypeError如果该值不是预期的类型，则抛出TypeError。 ➤ 1(); ⓧ Uncaught TypeError: 1 is not a function ➤ null.name; ⓧ Uncaught TypeError: Cannot read property 'name' of null 3.7 URIError如果以错误的方式使用全局 URI 方法，则会抛出URIError。 ➤ decodeURI("%%%"); ⓧ Uncaught URIError: URI malformed 4. 定义并抛出自定义错误我们也可以用这种方式定义自定义错误。 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); name: CustomError message: Custom error while executing the code我们还可以进一步增强CustomError对象以包含错误代码 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); name: CustomError message: Custom error while executing the code code: ERROR_CODE在try..catch块中使用它： 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我是小智，我们下期见！ 代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。 原文：https://codings.com/javascrip... 交流文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复福利，即可看到福利，你懂的。
本文同步分享在 博客“前端小智”（SegmentFault）。如有侵权，请联系 [email protected] 删除。本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。 |
【本文地址】