1、语法
try语句包含了由一个或者多个语句组成的try块，和至少一个catch块或者一个finally块的其中一个，或者两个兼有，下面是三种形式的try声明：
try...catch
try...finally
try...catch...finally
try {
// 需要被执行的语句
} catch (err) {
// 如果在try块里有异常被抛出时执行的语句
} finally {
// 在try语句块之后执行的语句块。无论是否有异常抛出或捕获这些语句都将执行。
}
上述代码中，try块中的语句首先被执行。如果运行中发生了错误，控制就会转移到位于catch块中语句，其中括号中的err参数被作为例外变量传递。否则，catch块的语句被跳过不执行。无论是发生错误还是catch块中的语句执行完毕，或者没有发生任何错误try块中的语句执行完毕，最后将执行finally块中的语句。
2、举例
1、无错误情况
try {
alert('开始执行 try1'); // (1)
alert('开始执行 try2'); // (2)
} catch (err) {
alert('catch 被忽略，因为没有 error，不会被执行'); // (3)
}
上面代码会弹出‘开始执行 try1’和开始执行 try2，但是不会弹出‘catch 被忽略，因为没有 error’
2、有错误情况
try {
alert('开始执行 try1'); // (1)
throw "此处抛出错误"; //try块里到此结束，不会在执行下边的try2
alert('try2，不会被执行'); // (2)
} catch (err) {
alert('出现了 error，此句被执行'); // (3)
}
上面代码会弹出‘开始执行 try1’和‘出现了 error，此句被执行’
3、try...catch 仅对可以运行的代码 error 有效。
要使得 try...catch 能工作，代码必须是可执行的。换句话说，它必须是有效的 JavaScript 代码。
如果代码包含语法错误，那么 try..catch 将无法正常工作，例如下边代码出现了一行逗号：
try {
，，，，，，//js引擎无法理解这段代码，它是无效的
throw "此处不会抛出错误"; //不会执行
alert('try2，此句不会被执行'); // (2)
} catch (err) {
alert('此句不会被执行'); // (3)
}
4、try catch 嵌套
try {
try {
throw new Error("try1");
}
finally {
console.log("finally");
}
}
catch (err) {
console.error("outer", err.message);
}
会输出
// finally
// outer try1
try {
try {
throw new Error("try1");
}
catch (err) {
console.error("inner", err.message);
}
finally {
console.log("finally");
}
}
catch (err) {
console.error("outer", err.message);
}
会输出
// inner try1
// finally
try {
try {
throw new Error("try1");
}
catch (err) {
console.error("inner", err.message);
// return 如果我在此处写个return会是什么结果？ （下边的报错信息肯定不会抛出了，当然return必须是在函数里）
throw new Error("try2"); //试想一下，如何把此句代码放在下边的finally里会怎么输出？（结果一样）
}
finally {
console.log("finally");
}
}
catch (err) {
console.error("outer", err.message);
}
会输出
// inner try1
// finally
// outer try2
try {
try {
throw new Error("try1");
}
catch (err) {
console.error("inner", err.message);
throw new Error("try2");
}
finally {
console.log("finally");
return //终止了错误的抛出
}
}
catch (err) {
console.error("outer", err.message); //不会被执行
}
会输出
// inner try1
// finally
5、try...catch 异步任务
try...catch 不会捕获到异步错误：
try {
setTimeout(()=>{
throw new Error('错误信息')
}, 1000);
} catch (err) {
alert( "alert不会执行" );
}
因为 try...catch 包裹了计划要执行的函数，该函数有延迟，这时js引擎已经离开了 try...catch 结构，也就是上下文环境已经改变，所以无法捕获异步任务里的错误。为了捕获到计划的函数中的异常，那么 try...catch 必须在这个函数内，如下
setTimeout(() => {
try {
throw new Error("错误信息");
} catch (err) {
alert("alert会执行");
}
}, 1000);
6、try...catch promise对象的异常捕获
try...catch 也不会捕获微任务，如下代码是捕获不到错误的。
function test(){
Promise.resolve('1').then(()=>{
throw new Error('错误信息')
})
}
try {
test()
} catch (err) {
alert("不工作");
}
try {
Promise.reject('错误信息');
} catch(e) {
console.log(e.message);
}
//这2段代码try，catch都不会捕获到错误信息，因为 promise 内部的错误不会冒泡出来，而是被 promise 吃掉了，只有通过 promise.catch 才可以捕获。
那我们顺带看下promise.catch
Promise.reject('错误信息').then(v=>{
return '1'
}).catch(v=>{
console.log(v) // 错误信息
})
Promise.resolve('1').then(v=>{
throw '错误信息'
}).catch(v=>{
console.log(v) // 错误信息
})
你会发现promise.reject的错误和promise.resolve里throw的错误都被promise.catch方法捕获。
7、try...catch async/await 的异常捕获
// 例子1
async function test() {
throw new Error('错误信息');
return 0;
}
test().then().catch(e => console.log(e.message)); // 错误信息(可以捕获到错误信息)
// 例子2
function promiseFn(){
return new Promise((resolve, reject) => {
throw new Error("错误信息");
});
}
async function test() {
try {
const res = await promiseFn();
} catch (e) {
console.log(e.message);//错误信息(可以捕获到错误信息)
}
}
test();
// 例子3
function promiseFn(){
new Promise((resolve, reject) => {
throw new Error("错误信息");
});
}
async function test() {
try {
const res = await promiseFn();
} catch (e) {
console.log(e.message);//不会执行 (捕获不到错误信息)
}
}
test();
// 例子3和例子2的区别在于promiseFn函数里没有了return了
// 例子4
function promiseFn(){
return Promise.reject('错误信息')
}
async function test() {
try {
const res = await promiseFn();
} catch (e) {
console.log(e);//错误信息(可以捕获到错误信息)
}
}
test();
8、全局监听抛出的错误
以上所有异常，仅通过 try catch、then 捕获同步、异步错误。这些是局部错误捕获手段，当我们无法保证所有代码都处理了异常时，可以进行全局异常监控，一般有两种方法：
window.addEventListener('error')
window.addEventListener('unhandledrejection')
error 可以监听所有同步、异步的运行时错误，但无法监听语法、接口、资源加载错误。而 unhandledrejection 可以监听到 Promise 中抛出的，未被 .catch 捕获的错误。
window.addEventListener('error', function (e) {
var error = e.error;
console.log(error);//错误信息
})
document.querySelector('button').addEventListener('click', () => {
throw new Error('错误信息')
})
