lwz blog

# 错误处理

错误，指程序中的非正常运行状态，在其他编程语言中称为‘异常’或，‘错误’。解释器为每个错误情形创建并抛出一个error对象，其中包含错误的描述信息。

# Error对象

ECMAScript预定义了六种类型的错误。执行代码期间可能会发生的错误类型有多种种类，每种种类都有对应的错误类型。当错误发生时，就会抛出对应类型的错误对象。

# 预定义错误类型

错误类型 说明
ReferenceError 表示错误的原因：无效引用，所使用的数据未定义
RangeError 表示错误的原因：数值变量或参数超出其有效范围
TypeError 表示错误的原因：变量或参数部属于有效类型
InternalError 表示javascript引擎内部错误的异常
EvalError 表示错误的原因：与eval()有关
SyntaxError 表示错误的原因：eval()在解析代码的过程发生的语法错误
URLError 表示错误的原因：给encodeURL()或decodeURL()传递的参数无效

错误类型

# 自定义错误类型

除了浏览器预定义的六种错误类型，开发人员可自定义错误并进行处理(处理方法见下)：

new Error("提示信息")

自定义错误

# 错误处理

通过使用JavaScript提供的异常处理语句，可以用结构优化的方式捕捉发生的错误，让异常处理代码核心业务代码实现分离。

出错行以下的所有JS代码将中停执行，这是我们不希望看到的，果我们能获取 这些Error，然后弹出一些友好界面会有更好的体验。 所以说，对于拿不准的代码段、容易报错或产生兼容问题的代码段/语句块加上错误处理。

  • 解决浏览器兼容性问题
  • 引用外部函数库，不确定函数库返回的结果正确与否。

# try...catch语句

try...catch 语句作为js中处理异常的一种标准方式。try语句标记一块待尝试的语句，如果该语句出现错误，则通过catch语句进行捕捉。

  • try 语句允许我们定义在执行时进行错误测试的代码块。
  • catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
    • catch语句中可接收到错误对象，对象上有两个常用属性
      • name：错误类型
      • message：错误信息
  • finally 语句指不管try误与异常，都会执行的代码块。
    • 在 finally 中我们可以放置我们必须要执行的代码。
    • finally可以省略 JavaScript 语句 try 和 catch 是成对出现的。
try {
    console.log(v);//- 调用未定义的变量，语法报错
}
//用于处理try中出现的错误
catch (error){
    //error - 表示try中出现错误的信息对象
    console.log(error.name);
    console.log(error.message);
}
//终结快 - 无论catch语句是否处理了try语句中的错误与异常，都会输出finally语句中的内容
finally {

}

# 注意事项

  1. try...catch只能捕获在其中执行的同步代码所抛出的异常，异步异常无法捕获
  2. try...catch会降低能，所以只将可能出错的代码片段放入try...catch

# throw 抛出语句

与try...catch语句配合使用的还有throw操作符，用于随时抛出定义错误。抛出错误是，必须给throw操作符制定一个值。（值不限类型）

function fn(v) {
    if (v){
        return v;
    }else {
        throw {name : '错误'};
    }
}

var result;
try{
    result=fn();
}catch (e){
    result = 'aa'
    console.log(e.name);//错误
}
console.log(result);//aa

throw常常会和 Error对象结合使用，用以抛出一个错误：

throw new Error("参数类型错误");
  • https://segmentfault.com/a/1190000016115486

# 错误处理使用场景：

# 同步场景中的错误

  1. 获取DOM元素进行DOM操作，如果未获取到元素需要进行错误判断
document.querySelector(".box").onclick = function(){
    // do something
}
// 如果未获取到元素则js代码会报错停止执行

错误处理

try {
    document.querySelector(".box").onclick = function () {
        // do something
    }
} catch (error) {
    console.log("未获取到元素")
}
  1. 兼容性错误
try {
    div.addEventListener(doSomething)
} catch (error) {
    div.attachEvent(doSomething)
}

# 异步函数中的错误

由于try...catch只能捕获同步代码,所以在异步函数外部使用try...catch是错误的：

try {
	ajax({})
} catch (e) {
    // 无法捕获到异步函数的错误
}

所以，回调函数的的错误处理只能在回调函数的内部处理.例如

ajax({
    success(){
        try{

        }catch(e){

        }
    }
})

或者使用Promise语法中的catch来捕获异步函数的错误：

fetch(url, options)
.then(res=>{
    return res.json()
}
.catch(error){
    // 利用Promise语法在catch中捕获错误
}

← Navigator对象 →