JavaScript基礎入門之錯誤捕獲機制

Posted on by

前言

Javascript 引擎是單線程的，因此一旦遇到異常，Javascript 引擎通常會停止執行，阻塞後續代碼並拋出一個異常信息，因此對於可預見的異常，我們應該捕捉並正確展示給用戶或開發者。

Error 對象

當運行時錯誤產生時，Error的實例對象會被拋出。

該錯誤對象有兩個屬性：

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

創建一個Error

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

錯誤類型js共定義瞭下列 7 種錯誤類型：

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

throw

有些JavaScript代碼沒有語法上的錯誤，但是存在邏輯錯誤，對於這種錯誤，JavaScript不會拋出異常，這時候我們可以自己定義一個error對象的實例，並使用throw語句來主動拋出異常。在程序中我們可以通過使用throw語句有目的的拋出異常，其語法格式如下:

throw new Error(“errorstatements”)

try…catch…finally

  • try 可能發生異常的代碼
  • catch(error) 發生錯誤執行的代碼
  • finally 無論如何都會執行的代碼

三種形式的 try 聲明:

  • try…catch
  • try…finally
  • try…catch…finally

finally 的規則

當在 finally 塊中拋出異常信息時會覆蓋掉 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 塊中返回一個值，那麼這個值將會成為整個 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 性能

有一個大傢眾所周知的反優化模式就是使用 try/catch

在V8（其他JS引擎也可能出現相同情況）函數中使用瞭 try/catch 語句不能夠被V8編譯器優化.

window.onerror

通過在 window.onerror 上定義一個事件監聽函數，程序中其他代碼產生的未被捕獲的異常往往就會被 window.onerror 上面註冊的監聽函數捕獲到

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

  • message：異常信息（字符串）
  • source：發生異常的腳本URL（字符串）
  • lineno：發生異常的行號（數字）
  • colno：發生異常的列號（數字）
  • error：Error對象（對象）

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 函數中，隻有 return / yield / throw 會中斷函數的執行，reject 不會阻止繼續執行

示例：

沒有 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'); //*** 區別在這裡，return 的話這裡不會執行瞭
})
.catch((err) => {
    console.log(err.message);
});

// before excute reject
// throw error

Vue 的異常捕獲

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

總結

到此這篇關於JavaScript基礎入門之錯誤捕獲機制的文章就介紹到這瞭,更多相關js錯誤捕獲機制內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：