前言
Javascript 引擎是单线程的，因此一旦遇到异常，Javascript 引擎通常会停止执行，阻塞后续代码并抛出一个异常信息，因此对于可预见的异常，我们应该捕捉并正确展示给用户或开发者。
Error 对象
当运行时错误产生时，Error的实例对象会被抛出。
该错误对象有两个属性：
- err.name：错误的名称/错误的类型
- err.message：错误的提示信息
创建一个Error
new Error([message[,fileName[,lineNumber]]])
错误类型js共定义了下列 7 种错误类型：
- Error
- EvalError
- RangeError
- ReferenceError
- SyntaxError
- TypeError
- URIError
throw
有些JavaScript代码没有语法上的错误，但是存在逻辑错误，对于这种错误，JavaScript不会抛出异常，这时候我们可以自己定义一个error对象的实例，并使用throw语句来主动抛出异常。在程序中我们可以通过使用throw语句有目的的抛出异常，其语法格式如下:
throw new Error("errorstatements")
try…catch…finally
- try 可能发生异常的代码
- catch(error) 发生错误执行的代码
- finally 无论如何都会执行的代码
三种形式的 try 声明:
- try...catch
- try...finally
- try...catch...finally
finally 的规则
当在 finally 块中抛出异常信息时会覆盖掉 try 块中的异常信息
try {
try {
throw new Error('can not find it1');
} finally {
throw new Error('can not find it2');
}
} catch (err) {
console.log(err.message);
}
// can not find it2
如果从 finally 块中返回一个值，那么这个值将会成为整个 try-catch-finally 的返回值，无论是否有 return 语句在 try 和 catch 中。这包括在 catch 块里抛出的异常。
function test() {
try {
throw new Error('can not find it1');
return 1;
} catch (err) {
throw new Error('can not find it2');
return 2;
} finally {
return 3;
}
}
console.log(test()); // 3
Try / Catch 性能
有一个大家众所周知的反优化模式就是使用 try/catch
在V8（其他JS引擎也可能出现相同情况）函数中使用了 try/catch 语句不能够被V8编译器优化.
window.onerror
通过在 window.onerror 上定义一个事件监听函数，程序中其他代码产生的未被捕获的异常往往就会被 window.onerror 上面注册的监听函数捕获到
window.onerror = function (message, source, lineno, colno, error) { }
- message：异常信息（字符串）
- source：发生异常的脚本URL（字符串）
- lineno：发生异常的行号（数字）
- colno：发生异常的列号（数字）
- error：Error对象（对象）
Promise 中的异常
Promise 中抛出异常
- new Promise((resolve,reject)=>{ reject(); })
- Promise.resolve().then((resolve,reject)=>{ reject(); });
- Promise.reject();
- throw expression;
Promise中捕捉异常
- promiseObj.then(undefined, (err)=>{ catch_statements });
- promiseObj.catch((exception)=>{ catch_statements })
注意
在 JavaScript 函数中，只有 return / yield / throw 会中断函数的执行，reject 不会阻止继续执行
示例：
没有 return 的 reject
Promise.resolve()
.then(() => {
console.log('before excute reject');
reject(new Error('throw error'));
console.log('after excute reject');
})
.catch((err) => {
console.log(err.message);
});
// before excute reject
// throw error
// after excute reject
用了 return 的 reject
Promise.resolve()
.then(() => {
console.log('before excute reject');
return reject(new Error('throw error'));
console.log('after excute reject'); //*** 区别在这里，return 的话这里不会执行了
})
.catch((err) => {
console.log(err.message);
});
// before excute reject
// throw error
Vue 的异常捕获
Vue.config.errorHandler = (err, vm, info) => {
console.error("通过vue errorHandler捕获的错误");
console.error(err);
console.error(vm);
console.error(info);
};
总结
到此这篇关于JavaScript基础入门之错误捕获机制的文章就介绍到这了,更多相关js错误捕获机制内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！