JS的常见错误的捕获方式

`JS`的常见错误的捕获方式

同步错误

一、 `SyntaxError`：语法错误

语法错误，这一类错误在预解析的过程中如果遇到，就会导致整个js文件都无法执行。在vue项目中如果存在语法错误，将直接无法运行，打包也将会直接报错

二、`Uncaught ReferenceError`：引用错误

引用一个不存在的变量时发生的错误。将一个值分配给无法分配的对象，比如对函数的运行结果或者函数赋值。此类错误可以通过try-catch捕获到

try {
    a()
} catch(e) {
	console.log('捕获到错误引用的错误==>',e)
    // 捕获到错误引用的错误==> Uncaught ReferenceError: a is not defined
}
复制代码

三、`RangeError`:范围错误

RangeError是当一个只超出有效范围时发生的错误。主要的有几种情况，第一是数组长度为负数，第二是Number对象的方法参数超出范围，以及函数堆栈超过最大值。此类错误可以通过try-catch捕获到

try{
    [].length=-5
} catch(e) {
    console.log('捕获到范围错误==>',e)
    // 捕获到范围错误==> Uncaught RangeError: Invalid array length
}
复制代码

四、`TypeError`:类型错误

变量或参数不是预期类型时发生的错误。比如使用new字符串、布尔值等原始类型和调用对象不存在的方法就会抛出这种错误，因为new命令的参数应该是一个构造函数。此类错误可以通过try-catch捕获到

try{
    const a = {}
    a()
} catch(e) {
    console.log('捕获到类型错误==>',e)
    // 捕获到类型错误==> TypeError: a is not a function
}
复制代码

五、`URIError,URL`错误

主要就是相关函数的参数不正确；URI相关参数不正确时抛出的错误，主要涉及encodeURI、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape(）六个函数。此类错误可以通过try-catch捕获到

try{
    decodeURI('%')
} catch(e) {
    console.log('捕获URI错误==>',e)
    // 捕获URI错误==> URIError: URI malformed
    //                       at decodeURI (<anonymous>)
}
复制代码

异步错误

一、`promise/async-await`错误

Promise 是异步编程的一种解决方案，比传统的解决方案callback更加的优雅。它最早由社区提出和实现的，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。Promise虽然可以避免回调地狱，但是一旦出现问题，无法使用try-catch进行捕获；这就对我们的错误捕获及处理就造成了不必要的麻烦。

好在ES8加入了对async/await的支持，也就我们所说的异步函数，这是一个很实用的功能。 async/await将我们从头痛的回调地狱中解脱出来了，使整个代码看起来很简洁。async-await的加入是我们又可以使用try-catch捕获异步的错误了

async function test (){
    try {
        // 假设a是一个异步函数
        await a()
    } catch(e){
        console.log('捕获到异步的错误==>',e)
    }
}
复制代码

二、`settimeout/setinterval/callBack`错误

在vue中可以使用window.onerror()进行监听settimeout/setinterval/callBack的错误;

window.onerror = (message,url,lineNo,cloumnNo,error) => {
    // message 错误信息
    // url 文件名
    // lineNo 行号
    // cloumnNo 列号
    // error 错误信息
}
复制代码

资源加载错误

使用window.addEventListener('error')捕获，window.onerror捕获不到资源加载错误;window.onerror和window.addEventListener('error')的异同:相同点是都可以捕获到window上的js运行时错误。区别是1.捕获到的错误参数不同 2.window.addEventListener('error')可以捕获资源加载错误，但是window.onerror不能捕获到资源加载错误

AJAX请求错误

这个错误可以在axios的请求拦截器中进行捕获该错误

转载于:https://juejin.im/post/5d036c036fb9a07efe2db97e