前言

Javascript 引擎是單線程的，因此一旦遇到異常，Javascript 引擎通常會(huì)停止執(zhí)行，阻塞后續(xù)代碼并拋出一個(gè)異常信息，因此對(duì)于可預(yù)見的異常，我們應(yīng)該捕捉并正確展示給用戶或開發(fā)者。

Error 對(duì)象

當(dāng)運(yùn)行時(shí)錯(cuò)誤產(chǎn)生時(shí)，Error的實(shí)例對(duì)象會(huì)被拋出。

該錯(cuò)誤對(duì)象有兩個(gè)屬性：

• err.name：錯(cuò)誤的名稱/錯(cuò)誤的類型
• err.message：錯(cuò)誤的提示信息
  

創(chuàng)建一個(gè)Error

new Error([message[,fileName[,lineNumber]]])

錯(cuò)誤類型js共定義了下列 7 種錯(cuò)誤類型：

1. Error
2. EvalError
3. RangeError
4. ReferenceError
5. SyntaxError
6. TypeError
7. URIError

throw

有些JavaScript代碼沒有語法上的錯(cuò)誤，但是存在邏輯錯(cuò)誤，對(duì)于這種錯(cuò)誤，JavaScript不會(huì)拋出異常，這時(shí)候我們可以自己定義一個(gè)error對(duì)象的實(shí)例，并使用throw語句來主動(dòng)拋出異常。在程序中我們可以通過使用throw語句有目的的拋出異常，其語法格式如下:

throw new Error("errorstatements")

try…catch…finally

• try 可能發(fā)生異常的代碼
• catch(error) 發(fā)生錯(cuò)誤執(zhí)行的代碼
• finally 無論如何都會(huì)執(zhí)行的代碼

三種形式的 try 聲明:

• try...catch
• try...finally
• try...catch...finally

finally 的規(guī)則

當(dāng)在 finally 塊中拋出異常信息時(shí)會(huì)覆蓋掉 try 塊中的異常信息

try {
    try {
        throw new Error('can not find it1');
    } finally {
        throw new Error('can not find it2');
    }
} catch (err) {
    console.log(err.message);
}

// can not find it2

如果從 finally 塊中返回一個(gè)值，那么這個(gè)值將會(huì)成為整個(gè) try-catch-finally 的返回值，無論是否有 return 語句在 try 和 catch 中。這包括在 catch 塊里拋出的異常。

function test() {
    try {
        throw new Error('can not find it1');
        return 1;
    } catch (err) {
        throw new Error('can not find it2');
        return 2;
    } finally {
        return 3;
    }
}

console.log(test()); // 3

Try / Catch 性能

有一個(gè)大家眾所周知的反優(yōu)化模式就是使用 try/catch

在V8（其他JS引擎也可能出現(xiàn)相同情況）函數(shù)中使用了 try/catch 語句不能夠被V8編譯器優(yōu)化.

window.onerror

通過在 window.onerror 上定義一個(gè)事件監(jiān)聽函數(shù)，程序中其他代碼產(chǎn)生的未被捕獲的異常往往就會(huì)被 window.onerror 上面注冊(cè)的監(jiān)聽函數(shù)捕獲到

window.onerror = function (message, source, lineno, colno, error) { }

• message：異常信息（字符串）
• source：發(fā)生異常的腳本URL（字符串）
• lineno：發(fā)生異常的行號(hào)（數(shù)字）
• colno：發(fā)生異常的列號(hào)（數(shù)字）
• error：Error對(duì)象（對(duì)象）

Promise 中的異常

Promise 中拋出異常

• new Promise((resolve,reject)=>{ reject(); })
• Promise.resolve().then((resolve,reject)=>{ reject(); });
• Promise.reject();
• throw expression;

Promise中捕捉異常

• promiseObj.then(undefined, (err)=>{ catch_statements });
• promiseObj.catch((exception)=>{ catch_statements })

注意

在 JavaScript 函數(shù)中，只有 return / yield / throw 會(huì)中斷函數(shù)的執(zhí)行，reject 不會(huì)阻止繼續(xù)執(zhí)行

示例：

沒有 return 的 reject

Promise.resolve()
.then(() => {
    console.log('before excute reject');
    reject(new Error('throw error'));
    console.log('after excute reject');
})
.catch((err) => {
    console.log(err.message);
});

// before excute reject
// throw error
// after excute reject

用了 return 的 reject

Promise.resolve()
.then(() => {
    console.log('before excute reject');
    return reject(new Error('throw error'));
    console.log('after excute reject'); //*** 區(qū)別在這里，return 的話這里不會(huì)執(zhí)行了
})
.catch((err) => {
    console.log(err.message);
});

// before excute reject
// throw error

Vue 的異常捕獲

Vue.config.errorHandler = (err, vm, info) => {
  console.error("通過vue errorHandler捕獲的錯(cuò)誤");
  console.error(err);
  console.error(vm);
  console.error(info);
};

總結(jié)

到此這篇關(guān)于JavaScript基礎(chǔ)入門之錯(cuò)誤捕獲機(jī)制的文章就介紹到這了,更多相關(guān)js錯(cuò)誤捕獲機(jī)制內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論