JavaScript中throw的错误异常处理

文章目录

    • 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("后续的代码")
    

你可能感兴趣的:(JavaScript高级,javascript,前端,html)