前端基础篇之JS中的try-catch-finally

本文链接：https://blog.csdn.net/qq_26822029/article/details/123931104

知识点1 javascript中的try-catch语句

1.1 try-catch语句

错误处理在程序设计中的重要性是勿庸置疑的，如果你的js代码在执行的过程中发生了错误，可能造成意想不到的结果（如没有反应、或者网页卡死等）。ECMA-262 第 3 版引入了 try-catch 语句，作为 JavaScript 中处理异常的一种标准方式，其基本的语法为：

try{ 
 // 可能会导致错误的代码
} catch(error){ 
 // 在错误发生时怎么处理
}

我们把可能会发生错误的代码放在try语句块中，把发生异常后的处理异常的代码放在catch语句块中。如果try语句块中的任何代码发生了错误，就会立即退出当前代码的执行过程，转而执行catch语句块中的代码。在catch语句块中会有一个默认的参数，其给出了相关的错误信息，可以使用error.message信息来查看错误提示（error.message是唯一的一个能够保证所有浏览器都支持的属性）。

1.2 finally

引用MDN中的说法：try语句包含了了由一个或多个语句组成的try块，和至少一个catch或者一个finally块，或者两者都有，其形式有如下三种：

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

那么finally又是何方神圣呢？在finally语句块中的代码一定会执行，也就是说：

如果try语句块中的代码全部正常执行，finally语句块中的代码会执行；
如果try语句块中的代码在执行的过程中出现错误，转而执行catch语句块中的代码，finally语句块中的代码最终也会被执行。

知识点2 try…catch…finally语句中的return值

如果从finally块中返回一个值，那么这个值将会成为整个try-catch-finally的返回值，无论是否有return语句在try和catch中。这包括在catch块里抛出的异常。举个栗子：

(() => {
try {
    console.log(123);
    return 123;
} catch {
    console.log(456);
    return 456;
} finally {
    console.log(789);
    return 'acc';
}
})()

上面的代码执行结果为

123
789
// 返回值 'acc'

再举个更复杂的栗子，这是一个嵌套的try块：

(() => {
try {
  try {
    throw new Error("oops");
  }
  catch (ex) {
    console.error("inner", ex.message);
    throw ex;
  }
  finally {
    console.log("finally");
    return;
  }
}
catch (ex) {
  console.error("outer", ex.message);
}
})()

// Output:
// "inner" "oops"
// "finally"