明白error类型让你更快定位开发报错

在javascript中,开发遇到的项目报错,很多时候都是通过 Error 这个类来展示的,清楚Error的类型可以更好定位项目中的问题

Error的类型

Error

Error是所有其它错误的父类,我们抛出异常时,不指定抛出的异常类型时,就用直接使用 Error

ReferenceError

表示引用的变量不存在,当没有定义变量,却直接引用时会报 Uncaught ReferenceError

console.log(userName)

明白error类型让你更快定位开发报错

TypeError

表示数据类型不正确,当定义了一个变量没有赋值时,此时值为undefined,再从undefined上获取元素会报 Uncaught TypeError

let user
console.log(user.name)

明白error类型让你更快定位开发报错

RangeError

表示数据值不在所允许的范围内,当函数循环调用导致栈溢出时,会报 Uncaught RangeError

function foo(){
  foo()
}

foo()

明白error类型让你更快定位开发报错

SyntaxError

表示语法错误,当编写不符合javascript语法规范的代码时,会报 Uncaught
SyntaxError,比如 双引号里面包含双引号

const name = """"

明白error类型让你更快定位开发报错

抛出错误

抛出异常通过throw关键字,抛出内容的类型有五种,报错的提醒为 Uncaught + 内容

字符串
function foo(){  
   throw 'hello'
}
foo()

明白error类型让你更快定位开发报错

对象
function foo(){
  throw {
    code: 404,
    message: '找不到页面'
  }
}
foo()

明白error类型让你更快定位开发报错

自定义类
class IceError {
  constructor(code, message){
    this.code = code
    this.message = message
  }
}
function foo(){
  throw new IceError('404', '找不到页面')
}
foo()

明白error类型让你更快定位开发报错

Error类
function foo(){
  throw new Error('找不到页面')
}
foo()

明白error类型让你更快定位开发报错

Error的子类
function foo(){
  throw new SyntaxError('语法错误')
}
foo()

明白error类型让你更快定位开发报错

当存在异常时,如果不捕获,会一层一层往上传,直到全局作用域,影响阻塞代码的执行。

捕获错误

通过 try catch 来对异常进行捕获,当出现错误时,则执行 catch 中的代码

function foo(){
  throw new Error('foo函数出错啦')
}

function bar(){
  try {
    foo()
  } catch (error) {
    console.log('捕获了foo函数的错误')    
  }
}

bar()

明白error类型让你更快定位开发报错

try catch 还有finally的属性,无论是否捕获了错误,都会执行 finally 中的代码

function foo(){
  console.log('foo函数没有出错')
}

function bar(){
  try {
    foo()
  } catch (error) {
    console.log('捕获了foo函数的错误')    
  } finally {
    console.log('执行了finally')
  }
}
bar()

明白error类型让你更快定位开发报错

错误对象

  • stack 函数调用栈记录信息
  • message 错误相关信息
try {
  console.log(a);
} catch (error) {
  console.log("error>>>>>>>>>>>", error);
  console.log("error.message>>>>>>>>>>>", error.message);
  console.log("error.stack>>>>>>>>>>>", error.stack);
}

明白error类型让你更快定位开发报错

以上就是error类型和捕获的相关内容,关于js高级,还有很多需要开发者掌握的地方,可以看看我写的其他博文,持续更新中~

上一篇:接口中可以有静态方法吗?


下一篇:vue 中的 provide/inject