前端異常處理

作為開發來講，異常處理如同家常便飯。隻要寫就一定會出錯，這是一定的。那面對海量的錯誤，我們應該怎麼處理，又有哪些一定要處理呢？

為什麼要處理異常？

因為客戶，更因為産品競争力。異常的産生，在開發環境來說還好，但是放到生産上，那就是毀天滅地的大事。甚至可能喪失一大部分客戶，往小說也是在消磨客戶對公司的耐心。

需要處理哪些異常？

現在想想，需要處理的異常還真不少。原則就是盡可能處理任何錯誤。總結如下：

• 頁面崩潰和卡頓
• 浏覽器跨域問題
• 文法類型錯誤
• 接口報錯，對前端來說。雖不能減少，但是要盡量降低影響。
• 資源請求問題

萬能解法的隐患

上面的所有問題，對于前端來說有一個萬能解決技巧。那就是try-catch文法。是以，絕大部分問題都可以使用try-catch解決，但是也有些隐患提前掌握下。

try-catch隻能捕獲同步的運作錯誤，對文法和異步錯誤無能為力。例如：

// 對同步執行的錯誤捕獲
try {
    const name = 'yaoshen';
    console.log(age);
} catch(error) {
    console.log('錯誤原因是：', error);
}
           

錯誤捕獲輸出：

錯誤原因是： ReferenceError: age is not defined
    at <anonymous>:3:21
           

但是，不能捕獲到文法類型錯誤。

// catch你捕獲不到我
try {
  let name = yaoshen';
  console.log(age);
} catch(error) {
    console.log('錯誤原因是：', error);
}
           

異常輸出：

VM574:2 Uncaught SyntaxError: Invalid or unexpected token
           

這裡可以看到，異常的輸出，并不來自catch的捕獲。而是直接文法報錯了。

非同步的js執行報錯

try {
  setTimeout(() => {
    'yaoshen'.set(666);
  }, 996)
} catch(error) {
    console.log('錯誤原因是：', error);
}
           

這裡的控制台報錯如下：

VM911:3 Uncaught TypeError: "yaoshen".set is not a function
    at <anonymous>:3:15
           

總結語