1. 程式人生 > 程式設計 >JavaScript基礎入門之錯誤捕獲機制

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

目錄
  • 前言
  • Error 物件
  • throw
  • try…catch…finally
    • finally 的規則
    • Try / Catch 效能
  • window.onerror
    • Promise 中的異常
      • Promise 中丟擲異常
      • Promise中捕捉異常
    • 的異常捕獲
      • 總結

        前言

        引擎是單執行緒的,因此一旦遇到異常,script 引www.cppcns.com擎通常會停止執行,阻塞後續程式碼並丟擲一個異常資訊,因此對於可預見的異常,我們應該捕捉並正確展示給使用者或開發者。

        Error 物件

        當執行時錯誤產生時,Error的例項物件會被丟擲。

        該錯誤物件有兩個屬性:

        • err.name:錯誤的名稱/錯誤的型別
        • err.message:錯誤的提示資訊

        建立一個Error

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

        錯誤型別共定義了下列 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;
         AmPyVvNx   }
        }
        
        console.log(test()); // 3
        

        Try / Catch 效能

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

        在V8(其他JS引擎也可能出現相同情況)函式中使用了 trwww.cppcns.comy/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
        
        http://www.cppcns.com

        Vue 的異常捕獲

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

        總結

        到此www.cppcns.com這篇關於JavaScript基礎入門之錯誤捕獲機制的文章就介紹到這了,更多相關js錯誤捕獲機制內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!