前言
怎么捕获错误并且处理,是一门语言必备的知识。在JavaScript中也是如此。
那怎么捕获错误呢?初看好像很简单,try-catch就可以了嘛!但是有的时候我们发现情况却繁多复杂。
Q1: 同步可以try-catch,但一个异步回调,比如setTimeOut里的函数还可以try-catch吗?
Q2: Promise的错误捕获怎么做?
Q3: async/await怎么捕获错误?
Q4: 我能够在全局环境下捕获错误并且处理吗?
Q5: React16有什么新的错误捕获方式吗?
Q6: 捕获之后怎么上报和处理?
问题有点多,我们一个一个来。
Q1. 同步代码里的错误捕获方式
在同步代码里,我们是最简单的,只要try-catch就完了
function test1 () {
try {
throw Error ('callback err');
} catch (error) {
console.log ('test1:catch err successfully');
}
}
test1();
Q2. 普通的异步回调里的错误捕获方式(Promise时代以前)
上面的问题来了,我们还能通过直接的try-catch在异步回调外部捕获错误吗?我们试一试
// 尝试在异步回调外部捕获错误的结果
function test2 () {
try {
setTimeout (function () {
throw Error ('callback err');
});
} catch (error) {
console.log ('test2:catch err successfully');
}
}
test2();
输出
注意这里的Uncaught Error的文本,它告诉我们错误没有被成功捕捉。
为什么呢? 因为try-catch的是属于同步代码,它执行的时候,setTimeOut内部的的匿名函数还没有执行呢。而内部的那个匿名函数执行的时候,try-catch早就执行完了。( error的内心想法:哈哈,只要我跑的够慢,try-catch还是追不上我!)
但是我们简单想一想,诶我们把try-catch写到函数里面不就完事了嘛!
function test2_1 () {
setTimeout (function () {
try {
throw Error ('callback err');
} catch (error) {
console.log ('test2_1:catch err successfully');
}//需要获取资料的朋友请加Q君样:290194256*
});
}
test2_1();
输出结果如下,告诉我们这方法可行
总结下Promise时代以前,异步回调中捕获和处理错误的方法
在异步回调内部编写try-catch去捕获和处理,不要在外部哦
很多异步操作会开放error事件,我们根据事件去操作就可以了
Q3. Promise里的错误捕获方式
可通过Promise.catch方法捕获
function test3 (