16|错误处理和调试

1. try-catch语句的使用

ECMA-262 第 3 版引入了 try-catch 语句，作为 JavaScript 中处理异常的一种标准方式

标准用法:

try{ 
  // 可能会导致错误的代码
} catch(error){ 
  // 在错误发生时怎么处理
}

2. finally

虽然说在try-catch语句中是可选的,但是如果说代码中包含了finally的话,无论如何都会执行finally里面的代码!

const testFinally = ()=>{
    try{
       return 2;     
    }catch(error){
       return 1; 
    }finally{
       return 0; 
    }
}
console.log(testFinally());//0

01|错误类型

在JavaScript中如果代码执行期间发生错误的话,就会抛出对应的类型的错误对象,一下就是常见的7中错误类型:

1. Error
2. EvalError 运行eval函数的时候
3. RangeError 数值超出相应范围的时候触发
4. ReferenceError 当我们尝试访问不存在的变量的时候就会出现这种错误!
5. SyntaxError 语法错误会出现这种error
6. TypeError 类型错误
7. URIError
   1. 在使用 encodeURI()或 decodeURI()，而 URI 格式不正确时，就会导致 URIError 错误

02|抛出错误:

throw new Error("error message");

对应的这就是最简单的错误类型的抛出了!

03|错误事件

在任何没有通过try-catch处理的错误都会触发window对象的error事件!

其中最主要的错误事件就是 onerror 事件处理程序不会创建event事件对象

我们处理错误实践的最标准的方式如下所示:

window.onerror = (message,url,line)=>{
    alert(message);
    return false;
}

其中之所以返回false,就是通过返回值阻止浏览器报告错误的默认行为!

04|处理错误的策略

基本上我们代码运行时期的时候,会需要关注三种错误:

• 类型转换的错误
• 数据类型错误
• 通信错误

1. 类型转换的错误

使用全等和不等进行比较,避免两个值之间隐式转换的比较!

2. 数据类型的错误

通过 typeof === 和 instanceof 进行比较

3. 通信错误

JavaScript与服务器之间的任何一次通信,都可能产生错误.最常见的就是将数据发送给服务器之前没有使用encodeURIComponent对数据进行编码操作!

• 第一种通信错误就是与格式不正确的URL或发送的数据有关

http://www.yourdomain.com/?redir=http://www.someotherdomain.com?a=b&c=d

那么应该如何解决呢?

const baseURL = `http://www.yourdomain.com/?redir=`;
const URL = `http://www.someotherdomain.com?a=b&c=d`;
const encodeURL = encodeURIComponent(URL);
const requestURL = `${baseURL}${encodeURL}`;

查询参数应该使用encodeURIComponent方法!

我们简单的创建一个方法用来封装编码后的URI!

const addQueryStrnigArgs = (url,name,value)=>{
    if(url.indexOf("?")===-1){
        url += "?";
    }else{
        url += "&";
    }
    url += `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
    return url;
}   

05|区分致命错误和非致命错误

非致命错误:

• 不影响用户的主要任务
• 只影响页面的一部分
• 可以恢复
• 重复相同操作可以消除错误

致命错误:

• 应用程序根本无法继续运行
• 错误明显影响到了用户的主要操作
• 会导致其他连带错误

06|将错误日志记录到服务器

也就是所谓的日志集中的保存操作! 便于我们去排查错误!

我们封装一个记录日志的函数,并且对其进行分析:

const logError = (server,message)=>{
    let img = new Image();
    img.src = `log.php?sev=${encodeURIComponent(server)}
                $message${encodeURIComponent(message)}`;
}

其中之所以使用image对象是:

• 因为浏览器都支持image对象

• 可以避免跨域限制

• 记录错误的过程中出现问题的概率比较低!

其中关于调试,或者说测试代码是否正确!

• JavaScript使用log可以很好地解决这个问题
• 使用测试函数通过调用函数本身来校验结果是否符合预期来检测函数的正确性!