（基础）JavaScript中错误处理throw使用，错误信息处理

个人项目地址： SubTopH前端开发个人站

（自己开发的前端功能和UI组件，一些有趣的小功能，感兴趣的伙伴可以访问，欢迎提出更好的想法，私信沟通，网站属于静态页面）

SubTopH前端开发个人站https://subtop.gitee.io/subtoph.github.io/#/home

以上 👆 是个人前端项目，欢迎提出您的建议😊

以下是正文内容...............

 开发中我们会封装一些工具函数，封装之后给别人使用

1. 在其他人使用的过程中，可能会传递一些参数
2. 对于函数来说，需要 对这些参数进行验证 ，否则可能得到的是我们不想要的结果

很多时候我们可能验证到不是希望得到的参数时，就会直接return

1. 但是return存在很大的弊端：调用者不知道是因为函数内部没有正常执行，还是执行结果就是一个undefined
2. 事实上，正确的做法应该是如果没有通过某些验证，那么应该 让外界知道函数内部报 错了

如何可以让一个函数告知外界自己内部出现了错误呢？

1. 通过throw关键字，抛出一个异常
2. throw语句用于抛出一个用户自定义的异常
3. 当遇到throw语句时，当前的函数执行会被停止（throw后面的语句不会执行）

/**
 * 如果我们有一个函数, 在调用这个函数时, 如果出现了错误, 那么我们应该是去修复这个错误.
 */

function sum(num1, num2) {
  // 当传入的参数的类型不正确时, 应该告知调用者一个错误
  if (typeof num1 !== "number" || typeof num2 !== "number") {
    // return undefined
    throw "parameters is error type~"
  }
  return num1 + num2
}

// 调用者(如果没有对错误进行处理, 那么程序会直接终止)
console.log(sum({ name: "swh" }, true))
// console.log(sum(20, 30))

console.log("后续的代码会继续运行~")


//D:\1a\JavaScriptNote\课堂\code\29_错误处理方案\01_函数出现错误处理.js:9
//    throw "parameters is error type~"
//    ^
//parameters is error type~

事实上，JavaScript已经给我们提供了一个Error类，我们可以直接创建这个类的对象

Error包含三个属性：

1. pmesssage：创建Error对象时传入的message
2. name：Error的名称，通常和类的名称一致
3. pstack：整个Error的错误信息，包括函数的调用栈，当我们直接打印Error对象时，打印的就是stack
4. 函数的调用栈是指抛出错误函数整个被调用的顺序

Error有一些自己的子类：

1. RangeError：下标值越界时使用的错误类型
2. SyntaxError：解析语法错误时使用的错误类型
3. TypeError：出现类型错误时，使用的错误类型

const err = new TypeError("当前type类型是错误的~")

//TypeError: 当前type类型是错误的~

异常的处理

我们会发现在之前的代码中，一个函数抛出了异常，调用它的时候程序会被强制终止

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

我们先来看一下这段代码的异常传递过程

1. foo函数在被执行时会抛出异常，也就是我们的bar函数会拿到这个异常
2. 但是bar函数并没有对这个异常进行处理，那么这个异常就会被继续传递到调用bar函数的函数，也就是test函数
3. 但是test函数依然没有处理，就会继续传递到我们的全局代码逻辑中
4. 依然没有被处理，这个时候程序会终止执行，后续代码都不会再执行了

function foo() {
  throw new Error('错误信息')   //抛出错误，未处理
}

function bar() {
  foo()                      //拿到错误，未处理
}

function test() {
  bar()                      //拿到错误，未处理
}

test()                       //拿到错误，未处理，导致后面代码不能执行
console.log('错误后执行代码...');


// throw new Error('错误信息')
// ^

// Error: 错误信息
//   at foo (D:\1a\JavaScriptNote\课堂\code\29_错误处理方案\03_对抛出的异常进行处理.js:52:9)       调用栈
//   at bar (D:\1a\JavaScriptNote\课堂\code\29_错误处理方案\03_对抛出的异常进行处理.js:56:3)       调用栈
//   at test (D:\1a\JavaScriptNote\课堂\code\29_错误处理方案\03_对抛出的异常进行处理.js:60:3)      调用栈
//   at Object.<anonymous> (D:\1a\JavaScriptNote\课堂\code\29_错误处理方案\03_对抛出的异常进行处理.js:63:1)   调用栈

异常的捕获

但是很多情况下当出现异常时，我们并不希望程序直接推出，而是希望可以正确的处理异常

1. 这个时候我们就可以使用try catch

function foo() {
  console.log(swh);    //swh未定义会抛出错误
}

function bar() {
  try {
    foo()                         //正常代码逻辑
  } catch (error) {
    console.log(error);           //拿到错误，处理
  } finally{
    console.log('始终都会执行');   //无论有没有错误都会执行
  }
}

function test() {
  bar()                      //上面处理错误，代码正常执行
}

test()                       //拿到错误，处理，后面代码执行
console.log('错误后执行代码...');

// ReferenceError: swh is not defined        错误信息处理
//     at foo (D:\1a\JavaScriptNote\课堂\code\29_错误处理方案\03_对抛出的异常进行处理.js:30:15)
//     at bar (D:\1a\JavaScriptNote\课堂\code\29_错误处理方案\03_对抛出的异常进行处理.js:35:5)
//     at test (D:\1a\JavaScriptNote\课堂\code\29_错误处理方案\03_对抛出的异常进行处理.js:42:3)
//     at Object.<anonymous> (D:\1a\JavaScriptNote\课堂\code\29_错误处理方案\03_对抛出的异常进行处理.js:45:1)
//     at Module._compile (internal/modules/cjs/loader.js:1063:30)
//     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
//     at Module.load (internal/modules/cjs/loader.js:928:32)
//     at Function.Module._load (internal/modules/cjs/loader.js:769:14)
//     at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
//     at internal/main/run_main_module.js:17:47
// 始终都会执行                                finally代码执行
// 错误后执行代码...                           后续代码执行

在ES10（ES2019）中，catch后面绑定的error可以省略

当然，如果有一些必须要执行的代码，我们可以使用finally来执行

1. finally表示最终一定会被执行的代码结构
2. 注意：如果try和finally中都有返回值，那么会使用finally当中的返回值

function foo() {
  console.log('foo执行');          //正确代码
}

function bar() {
  try {
    foo()                          
    return 'try返回值'              //try中返回值
  } catch (error) {             
    console.log(error);         
  } finally{
    console.log('始终都会执行');    
    return 'finally中返回值'         //finally中返回值
  }
}

function test() {             
  console.log(bar());           //finally中返回值
}

test()                     
console.log('错误后执行代码...');

// foo执行
// 始终都会执行
// finally中返回值
// 错误后执行代码...