你不容错过的JavaScript高级语法(错误处理)

简介: 你不容错过的JavaScript高级语法(错误处理)

众所周知,js在前端开发中的地位。学好它,真的很重要。


下面这篇文章,介绍一下错误处理。


错误处理


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


  • 在其他人使用的过程中,可能会传递一些参数。


  • 对于函数来说,需要对这些参数进行验证,否则可能得到的是我们不想要的结果。

很多时候我们可能验证到不是希望得到的参数时,就会直接return。但是return存在很大的弊端:调用者不知道是因为函数内部没有正常执行,还是执行结果就是一个undefined。


事实上,正确的做法应该是如果没有通过某些验证,那么应该让外界知道函数内部报错了。


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


  • 通过throw关键字,抛出一个异常。


  • throw语句用于抛出一个用户自定义的异常。


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


  • 如果不处理抛出的错误,那么整个程序也会就此停止。 如果我们执行代码,就会报错,拿到错误信息的时候我们可以及时的去修正代码。


throw


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


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


  • 基本数据类型:比如number、string、Boolean。


  • 对象类型:对象类型可以包含更多的信息。


// 2.比较常见的是抛出一个对象类型
    throw { errorCode: -1001, errorMessage: "type不能为0~" }


  • 其实,在开发中基本上都是t通过调用Error类来抛出错误信息。


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


Error包含三个属性:


  • messsage:创建Error对象时传入的message。


  • name:Error的名称,通常和类的名称一致。


  • stack:整个Error的错误信息,包括函数的调用栈,当我们直接打印Error对象时,打印的就是stack。


Error有一些自己的子类:


  • RangeError:下标值越界时使用的错误类型。


  • SyntaxError:解析语法错误时使用的错误类型。


  • TypeError:出现类型错误时,使用的错误类型。


function foo(type) {
      console.log("foo函数开始执行")
      if (type === 0) {
        throw  new TypeError("当前type类型是错误的~")
        // 强调: 如果函数中已经抛出了异常, 那么后续的代码都不会继续执行了
        console.log("foo函数后续的代码")
      }
      console.log("foo函数结束执行")
    }
    foo(0)
    console.log("后续的代码继续执行~")


网络异常,图片无法展示
|


异常的处理


从上面可以了解到,如果未对抛出的错误处理,那么将会终止程序的执行。


  • 这是因为如果我们在调用一个函数时,这个函数抛出了异常,但是我们并没有对这个异常进行处理,那么这个异常会继续传递到上一个函数调用中。


  • 而如果到了最顶层(全局)的代码中依然没有对这个异常的处理代码,这个时候就会报错并且终止程序的运行。


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


function foo() {
      throw new Error("foo----")
    }
    function bar() {
      foo()
    }
    function test() {
      bar()
    }
    test()


  • foo函数在被执行时会抛出异常,也就是我们的bar函数会拿到这个异常。


  • 但是bar函数并没有对这个异常进行处理,那么这个异常就会被继续传递到调用bar函数的函数,也就是test函数。


  • 但是test函数依然没有处理,就会继续传递到我们的全局代码逻辑中。


  • 依然没有被处理,这个时候程序会终止执行,后续代码都不会再执行了。 所以我们就需要在出现错误的位置,捕获错误,来使程序能正确运行。所以就需要try catch语法。


function foo() {
      throw new Error("foo----")
    }
    function bar() {
      try {
      foo(0)
        console.log("bar函数后续的继续运行")
        return 2
      } catch(err) {
        console.log("err:", err.message)
        return 1
      } finally {
        console.log("finally代码执行~, close操作")
        return 0
      }
      return 3
    }
    function test() {
        console.log(bar()) // 0
    }
    test()


在ES10(ES2019)中,catch后面绑定的error可以省略。


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


注意:如果try,catch和finally中都有返回值,那么会使用finally当中的返回值。


相关文章
|
2月前
|
存储 JavaScript 前端开发
Node.js的基本语法
【8月更文挑战第12天】Node.js的基本语法
107 1
|
5天前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
6 0
|
2月前
|
JavaScript 前端开发
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
这篇文章是JavaScript基础与实战教程的第一部分,涵盖了JavaScript的基本语法、标识符、数据类型以及如何进行强制类型转换,通过代码示例介绍了JS的输出语句、编写位置和数据类型转换方法。
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
|
2月前
|
前端开发 JavaScript 程序员
前端 JavaScript 的 _ 语法是个什么鬼?
前端 JavaScript 的 _ 语法是个什么鬼?
|
3月前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
110 4
|
3月前
|
前端开发 JavaScript
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
430 0