>[success] # try...catch 處理異常 ~~~ 1.當需要處理一些異常，或者將一些異常拋出的時候， 就是可以使用'try...catch' 代碼塊,在我現階段工作中， 異步處理會經常用到這個 ~~~ >[danger] ##### 異常的傳遞 1. 在調用一個函數時，**這個函數拋出了異常**，但是我們并沒有對這個異常進行處理，那么這個異常會繼續傳遞到上一個函數調用中； 而**如果到了最頂層（全局）的代碼中依然沒有對這個異常的處理代碼，這個時候就會報錯并且終止程序的運行** ~~~ function foo() { throw new Error('我是錯誤信息') } function test() { // 如果自己捕獲了異常的話, 那么異常就不會傳遞給瀏覽器, 那么后續的代碼可以正常執行 foo() } function bar() { test() } bar() console.log(111) ~~~  >[info] ## 使用異常的捕獲 防止報錯全局阻塞代碼 ~~~ 1.使用起來常見的三種格式： 1.1 try...catch 1.2 try...finally 1.3 try...catch...finally 2.try 中放著可能會導致錯誤的代碼，catch 如果在try塊里有 異常被拋出時執行的語句。finally在try語句塊之后執行的語句塊。 無論是否有異常拋出或捕獲這些語句都將執行 。 3.catch 塊會接受一個包含錯誤信息的對象，這里要說明如果拋出 的是 'Error' 對象，那么可以使用它的'message'屬性獲取報錯信息 4.一共有七種錯誤對象類型，其中六種繼承了'Error': 4.1 Error 4.2 EvalError -- 在使用eval() 異常時候拋出 4.3 RangeError -- 數值超出相應范圍 例如數組 new Aarray(-20) 4.4 ReferenceError -- ReferenceError（引用錯誤） 對象代表當一個不存在的變量被引用時發生的錯誤。 4.5 SyntaxError -- 語法錯誤 4.6 TypeError -- 類型錯誤 4.7 URIError -- 錯誤的方式使用全局URI處理函數而產生的錯誤 ~~~ >[danger] ##### 基礎案例 ~~~ try{ // 沒問題的代碼只走我和finally new Array(-20) }catch (e) { // try 發生的錯我我全都接受 console.log(e.message) }finally { // 不管你走的是try還是catch 都會走我 console.log('wowoow') } // 打印結果： Invalid array length wowoow ~~~ >[danger] ##### Error類型 1. JavaScript已經給我們提供了一個Error類 ~~~ new Error('msg') ~~~ 2. **Error包含三個屬性**： 2.1. **messsage**：創建Error對象時傳入的message； 2.2. **name**：Error的名稱，通常和類的名稱一致； 2.3. **stack**：整個Error的錯誤信息，包括函數的調用棧，當我們直接打印Error對象時，打印的就是stack 3. Error有一些自己的子類： RangeError：下標值越界時使用的錯誤類型； SyntaxError：解析語法錯誤時使用的錯誤類型； TypeError：出現類型錯誤時，使用的錯誤類型； >[danger] ##### 了解一下throw 解釋一下message ~~~ 1.只用是通過'Error'對象產生的在catch接收才會有'message'屬性 2.throw 會 拋出異常被catch 接受到 3.throw語句用于拋出一個用戶自定義的異常；當遇到throw語句時，當前的函數執行會被 停止（throw后面的語句不會執行） 4. throw關鍵字可以跟上基本數據類型：比如number、string、Boolean 對象類型：對象類型可以包含更多的信息 ~~~ ~~~ try{ throw '錯誤' }catch (e) { // 拋出產生的錯誤不是Error對象所以e沒有message屬性的 console.log(e) }finally { // 不管你走的是try還是catch 都會走我 console.log('wowoow') } ~~~ ~~~ try{ throw new Error('錯誤') }catch (e) { // 拋出產生的錯誤是Error對象所以e有message屬性的 console.log(e.message) }finally { // 不管你走的是try還是catch 都會走我 console.log('wowoow') } ~~~ >[danger] ##### 嵌套多層 try...catch ~~~ // 可以嘗試這種將報錯拋出都交給最后一層抓 try { try { throw new Error("oops"); } catch (ex) { console.error("inner", ex.message); throw ex; } finally { console.log("finally"); } } catch (ex) { console.error("outer", ex.message); } ~~~ >[danger] ##### 在工作中對ajax 常用的寫法 ~~~ async getDataSourceFields(params: { dataSourceId: string; dataSourceType: string }) { try { AppModule.showWaiting() const pamrams = await DashboardApi.fetchDatasourceFields(params) console.log(pamrams) } catch (e) { // 做了兼容處理 既能包含非Error 對象返回的錯誤信息 console.error(`獲取數據源失敗${ e.message || e}`) } finally { // 會在最后無論有沒有異常都關閉等待 AppModule.closeWaiting() } } ~~~