JavaScript 中 try...catch 异常处理详解与最佳实践

try...catch
try...finally
try...catch...finally

try {
  // 需要被执行的语句
} catch (err) {
  // 如果在try块里有异常被抛出时执行的语句
} finally {
  // 在try语句块之后执行的语句块。无论是否有异常抛出或捕获这些语句都将执行。
}

try {
  alert('开始执行 try1');  // (1)
  alert('开始执行 try2');   // (2)
} catch (err) {
  alert('catch 被忽略，因为没有 error，不会被执行'); // (3)
}

try {
  alert('开始执行 try1');  // (1)
  throw "此处抛出错误"; //try块里到此结束，不会在执行下边的try2
  alert('try2，不会被执行');   // (2)
} catch (err) {
  alert('出现了 error，此句被执行'); // (3)
}

try {
  ，，，，，，//js引擎无法理解这段代码，它是无效的
  throw "此处不会抛出错误"; //不会执行
  alert('try2，此句不会被执行'); // (2)
} catch (err) {
  alert('此句不会被执行'); // (3)
}

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

try {
    setTimeout(()=>{
      throw new Error('错误信息')
    }, 1000);
  } catch (err) {
    alert( "alert不会执行" );
  }

setTimeout(() => {
 try {
    throw new Error("错误信息");
 } catch (err) {
    alert("alert会执行");
 }
}, 1000);

function test() {
  Promise.resolve("1").then(() => {
    throw new Error("错误信息");
  });
}

try {
  test();
} catch (err) {
  alert("不工作");
}

try {
  Promise.reject("错误信息");
} catch (e) {
  console.log(e.message);
}

// 例子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() {
  return Promise.reject("错误信息");
}
async function test() {
  try {
    const res = await promiseFn();
  } catch (e) {
    console.log(e); //错误信息(可以捕获到错误信息)
  }
}
test();

window.addEventListener("error", function (e) {
  var error = e.error;
  console.log(error); //错误信息
});
document.querySelector("button").addEventListener("click", () => {
  throw new Error("错误信息");
});