JavaScript中throw的错误异常处理

灰太狼 2023-10-02 20:05 11阅读 0赞

#### 文章目录 ####

*   *  throw错误异常处理
     *   *  1. 认识throw
         *  2. throw使用
         *  3. Error类
         *  4. 异常的处理
         *  5. 异常的捕获

### throw错误异常处理 ###

#### 1. 认识throw ####

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

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

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

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

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

*  通过throw关键字，抛出一个异常(前面我们有简单的使用过)；

**throw语句：**

*  throw语句用于**抛出一个用户自定义的异常**；
 *  当**遇到throw语句时，当前的函数执行会被停止（throw后面的语句不会执行）**；

function foo() {
        
      console.log("aaa")
      throw "foo的错误"
      console.log("bbb")
      console.log("ccc")
    }
    foo()
    
    // 执行结果
    // aaa
    // Uncaught foo的错误

**如果我们执行代码，就会报错，拿到错误信息的时候我们可以及时的去修正代码。**

#### 2. throw使用 ####

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

throw expression

**throw关键字可以跟上哪些类型呢？**

*  **基本数据类型**：比如number、string、Boolean
    
        function foo() {
              
          console.log("aaa")
          // 1. number类型
          throw 123
          console.log("bbb")
          console.log("ccc")
        }
        foo()
    
        function foo() {
              
          console.log("aaa")
          // 2. 字符串类型
          throw "abc"
          console.log("bbb")
          console.log("ccc")
        }
        foo()
    
        function foo() {
              
          console.log("aaa")
          // 3. Boolean类型
          throw true
          console.log("bbb")
          console.log("ccc")
        }
        foo()
 *  **对象类型**：对象类型可以包含更多的信息
    
        function foo() {
              
          console.log("aaa")
          // 错误信息也可以是一个对象类型
          throw {
              
            errMessage: "我是错误信息",
            errCode: -1001
          }
          console.log("bbb")
          console.log("ccc")
        }
        foo()
        
        // 打印结果
        // aaa
        // ncaught Error {errMessage: '我是错误信息', errCode: -1001}

**但是每次写这么长的对象又有点麻烦，所以我们可以创建一个类**：

class MYError {
        
      constructor(errMessage, errCode) {
        
        this.errMessage = errMessage
        this.errCode = errCode
      }
    }
    function foo() {
        
      console.log("aaa")
      throw new MYError("我是错误信息", -1001)
      console.log("bbb")
      console.log("ccc")
    }
    foo()
    
    // 打印结果
    // aaa
    // ncaught Error {errMessage: '我是错误信息', errCode: -1001}

#### 3. Error类 ####

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

function foo() {
        
      throw new Error("我是错误信息")
    }
    foo()

**Error包含三个属性(一般都只传入一个参数)** :

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

**Error有一些自己的子类**：

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

#### 4. 异常的处理 ####

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

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

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

*  foo函数在被执行时会抛出异常，也就是我们的bar函数会拿到这个异常；
 *  但是bar函数并没有对这个异常进行处理，那么这个异常就会被继续传递到调用bar函数的函数，也就是test函数；
 *  但是test函数依然没有处理，就会继续传递到我们的全局代码逻辑中；
 *  依然没有被处理，这个时候程序会终止执行，后续代码都不会再执行了；
    
        function foo() {
              
          throw "foo error message"
        }
        
        function bar() {
              
          foo()
        }
        
        function text() {
              
          bar()
        }
        
        text()
        
        console.log("后续的代码")

#### 5. 异常的捕获 ####

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

*  这个时候我们就**可以使用try catch**, **没有产生异常执行try中的代码, 捕获异常执行catch中的代码并且后面代码正常执行**
    
        function foo() {
              
          throw "coerwhy error message"
        }
        
        function bar() {
              
          try {
              
            foo()
          } catch(error) {
              
            console.log(error)
          }
        }
        
        function text() {
              
          bar()
        }
        
        text()
        
        console.log("后续的代码")
        
        // 打印结果
        // foo error message
        // 后续的代码

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

function foo() {
        
      throw "coerwhy error message"
    }
    
    function bar() {
        
      try {
        
        foo()
      } catch {
        
        console.log("异常中代码")
      }
    }
    
    function text() {
        
      bar()
    }
    
    text()
    
    console.log("后续的代码")
    
    // 打印结果
    // 异常中代码

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

*  finally表示**最终一定会被执行的代码结构, 不管代码是否**；
 *  注意：如果try和finally中都有返回值，那么会使用finally当中的返回值；
    
        function foo() {
              
          throw "foo error message"
        }
        
        function bar() {
              
          try {
              
            foo()
            console.log("无异常代码")
          } catch(error) {
              
            console.log(error)
          } finally {
              
            console.log("finally中代码")
          }
        }
        
        function text() {
              
          bar()
        }
        
        text()
        
        console.log("后续的代码")