JS Advance --- 异常处理

抛出异常

这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战

我们可以通过throw关键字，抛出一个异常， throw语句用于抛出一个用户自定义的异常

当遇到throw语句时，当前的函数执行会被停止(throw后面的语句不会执行)

throw表达式就是在throw后面可以跟上一个表达式来表示具体的异常信息

function sum(num1, num2) {
  if (typeof num1 !== 'number' || typeof num2 !== 'number') {
    throw '参数类型不正确'
  }

  return num1 + num2
}

sum(1, {})

throw关键字后边可以接上:

1. 基本数据类型: 比如number、string、Boolean
2. 对象类型: 对象类型可以包含更多的信息 --- 最为常见

function sum(num1, num2) {
  if (typeof num1 !== 'number' || typeof num2 !== 'number') {
    throw {
      code: 1001,
      message: '参数类型不正确'
    }
  }

  return num1 + num2
}

sum(1, {})

但是每次都需要自己去编写对应错误对象，会导致格式和数据内容不统一，所以为了统一规范，JS内置了一个Error类，我们可以直接创建这个类的实例，Error类的作用就是用来在程序中抛出对应的异常错误

function sum(num1, num2) {
  if (typeof num1 !== 'number' || typeof num2 !== 'number') {
    throw new Error('参数类型不正确')
  }

  return num1 + num2
}

sum(1, {})

Error包含三个属性:

• messsage: 创建Error对象时传入的message;
• name: Error的类型名称，通常和类的名称一致;
• stack: 整个Error的错误信息，包括函数的调用栈，当我们直接打印Error对象时，打印的就是stack;

如果我们直接在控制台输出Error的实例的时候，也就是执行Error实例的toString方法的时候，实际输出的就是Error实例的stack属性所对应的值

在JS中，存在各种各样的Error，所以Error类还可以继续进行拆分

在JS的错误类中Error类是所有错误类的父类

而Error有一些自己的子类:

• RangeError: 下标值越界时使用的错误类型;
• SyntaxError: 解析语法错误时使用的错误类型;
• TypeError: 出现类型错误时，使用的错误类型
• 等等

异常处理

如果我们在调用一个函数时，这个函数抛出了异常，但是我们并没有对这个异常进行处理，那么这个异常会继续传 递到上一个函数调用中。如果到了最顶层(全局)的代码中依然没有对这个异常的处理代码，这个时候就会报错并且终止后续程序的运行

function sum(num1, num2) {
  if (typeof num1 !== 'number' || typeof num2 !== 'number') {
    throw new Error('参数类型不正确')
  }

  return num1 + num2
}

function foo() {
  // sum函数抛出了异常，sum函数并没有处理
  // 所以会在这里进行抛出，也就是foo函数会接着将这个异常继续抛出
  sum(1, {})
}

function bar() {
  // foo函数没有处理异常，bar函数抛出异常
  foo()
}

// bar函数抛出了异常，已经到顶层了，所以程序抛出异常，停止运行
bar()

但是很多情况下当出现异常时，我们并不希望程序直接推出，而是希望可以正确的处理异常，这个时候我们就可以使用try...catch...来进行异常的捕获处理

function sum(num1, num2) {
  if (typeof num1 !== 'number' || typeof num2 !== 'number') {
    throw new Error('参数类型不正确')
  }

  return num1 + num2
}

function foo() {
  try {
    // 这里放置可能抛出异常的逻辑代码
    sum(1, {})
  } catch(err) {
    // 如果出现了异常，异常会在这里被传入
    console.log(err.message)
  }
}

foo()

如果有一些必须要执行的代码，我们可以使用finally来执行，finally表示最终一定会被执行的代码结构

try {
  sum(1, {})
} catch(err) {
  console.log(err.message)
} finally {
  console.log('finally函数无论是否抛出了异常，都会被执行')
}

注意：

1. finally字段是可以省略的，此时catch字段是不可以被省略的
2. 如果存在了finally，catch字段是可以省略的

// √ good
try {
  
} catch(e) {
  
}

// √ good
try {
  
} catch(e) {
  
} finally {
  
}

// √ good
try {
  
} finally {
  
}

// × bad
try {
  
}

3. 如果try和catch和finally中都有返回值，那么会使用finally当中的返回值

function sum(num1, num2) {
  if (typeof num1 !== 'number' || typeof num2 !== 'number') {
    throw new Error('参数类型不正确')
  }

  return num1 + num2
}

function foo() {
  try {
    sum(1, {})
    return 'try字段中的返回值'
  } catch(err) {
    console.log(err.message)
    return 'error字段中的返回值'
  } finally {
    return 'finally字段中的返回值'
  }
}

// finally字段中的返回值，会覆盖try字段或catch字段中的返回值
console.log(foo()) // => finally字段中的返回值

在ES10(ES2019)中，catch后面绑定的error可以省略, 但是并不被推荐

function sum(num1, num2) {
  if (typeof num1 !== 'number' || typeof num2 !== 'number') {
    throw new Error('参数类型不正确')
  }

  return num1 + num2
}

function foo() {
  try {
    sum(1, {})
  } catch {
    // 没有接收错误信息，所以此时无法获取任何的错误信息 --- 不推荐
    console.log('因为没有接收错误信息，所以此时无法获取任何的错误信息')
  } finally {
    console.log('finally')
  }
}

foo()