在任何一門語言中，都需要錯誤處理部分。

因為它是確保代碼健壯性和用戶體驗的重要部分。

JavaScript 的錯誤處理主要包括以下幾個：

1. try...catch 語句：這是最常用的錯誤處理方式。try塊包含可能會拋出錯誤的代碼，而catch塊則處理這些錯誤。finally塊中的代碼無論是否發(fā)生錯誤都會執(zhí)行，通常用于清理資源或執(zhí)行收尾工作。

2. throw 語句：可以使用throw語句手動拋出錯誤。拋出的錯誤可以是任何類型，但通常是Error對象。

3. 錯誤對象：JavaScript 中的錯誤對象包含message、name和stack屬性。message是錯誤信息，name是錯誤類型，stack是堆棧跟蹤信息。

4. Promise 中的錯誤處理：在處理異步操作時，使用Promise的.catch方法來捕獲錯誤。

5. async/await 中的錯誤處理：在使用async/await時，可以結(jié)合try...catch來處理異步操作中的錯誤。

現(xiàn)在就來一個一個看看。

try...catch

當(dāng)我們需要解析 JSON 字符串時，如果解析失敗，就捕獲并處理錯誤：

const jsonString = '{"name": "張三", "age": 30}';  try {   // 嘗試解析JSON字符串   const user = JSON.parse(jsonString);   console.log(user.name); // 輸出: 張三 } catch (error) {   // 處理解析錯誤   console.error('解析JSON時出錯:', error.message); } 

如果jsonString是一個有效的 JSON 字符串，JSON.parse會成功解析并輸出用戶的名字。

如果jsonString是無效的 JSON 字符串，JSON.parse會拋出一個錯誤，catch塊會捕獲這個錯誤并輸出錯誤信息。

throw 語句

假設(shè)有一個函數(shù)的參數(shù)要求數(shù)字，如果不是數(shù)字，就拋出一個錯誤：

function divide(a, b) {   if (typeof a !== 'number' || typeof b !== 'number') {     throw new Error('參數(shù)必須是數(shù)字');   }   if (b === 0) {     throw new Error('除數(shù)不能為零');   }   return a / b; }  try {   console.log(divide(10, 2)); // 輸出: 5   console.log(divide(10, 'a')); // 拋出錯誤: 參數(shù)必須是數(shù)字 } catch (error) {   console.error('發(fā)生錯誤:', error.message); } 

divide函數(shù)首先檢查參數(shù)a和b是否為數(shù)字。

如果不是，就使用throw語句拋出一個錯誤。

然后，它檢查除數(shù)b是否為零，如果是，也拋出一個錯誤。

在try塊中，我們調(diào)用divide函數(shù)并捕獲任何可能拋出的錯誤。

如果發(fā)生錯誤，catch塊會捕獲錯誤并輸出錯誤信息。

錯誤對象

錯誤對象是用于表示和處理錯誤的內(nèi)置對象。

1. 創(chuàng)建錯誤對象：可以使用Error構(gòu)造函數(shù)來創(chuàng)建一個新的錯誤對象。這個構(gòu)造函數(shù)接受一個參數(shù)，表示錯誤信息。

   const error = new Error('發(fā)生了錯誤'); console.log(error.message); // 輸出: 發(fā)生了錯誤 

2. 錯誤對象的屬性：錯誤對象包含幾個重要的屬性：

   try {   throw new Error('自定義錯誤信息'); } catch (error) {   console.log(error.message); // 輸出: 自定義錯誤信息   console.log(error.name); // 輸出: Error   console.log(error.stack); // 輸出: 堆棧跟蹤信息 } 

• message：錯誤信息。

• name：錯誤的類型，默認(rèn)是Error。

• stack：堆棧跟蹤信息，顯示錯誤發(fā)生的位置。

3. 自定義錯誤類型：可以通過繼承Error類來創(chuàng)建自定義的錯誤類型。

   class ValidationError extends Error {   constructor(message) {     super(message);     this.name = 'ValidationError';   } }  try {   throw new ValidationError('無效的輸入'); } catch (error) {   console.log(error.message); // 輸出: 無效的輸入   console.log(error.name); // 輸出: ValidationError } 

4. 使用錯誤對象進(jìn)行錯誤處理：在try...catch語句中，可以捕獲并處理錯誤對象。

   function divide(a, b) {   if (typeof a !== 'number' || typeof b !== 'number') {     throw new Error('參數(shù)必須是數(shù)字');   }   if (b === 0) {     throw new Error('除數(shù)不能為零');   }   return a / b; }  try {   console.log(divide(10, 2)); // 輸出: 5   console.log(divide(10, 'a')); // 拋出錯誤: 參數(shù)必須是數(shù)字 } catch (error) {   console.error('發(fā)生錯誤:', error.message); } 

Promise 中的錯誤處理

前面說過，Promise 是處理異步操作的一種方式，而錯誤處理是確保代碼健壯性的重要部分。

當(dāng)一個 Promise 被拒絕（rejected）時，控制權(quán)會移交到最近的拒絕處理程序（rejection handler）。

這在實際開發(fā)中非常方便。

例如，下面的代碼中，fetch 的 URL 是錯誤的（沒有這個網(wǎng)站），.catch對這個錯誤進(jìn)行了處理：

fetch('https://no-such-server.blabla')   .then((response) => response.json())   .catch((err) => alert(err)); 

正如你所看到的，.catch不必是立即的。

它可以在一個或多個.then之后出現(xiàn)。

或者，可能該網(wǎng)站一切正常，但響應(yīng)不是有效的 JSON。

捕獲所有錯誤的最簡單的方法是，將.catch附加到鏈的末尾：

fetch('/article/promise-chaining/user.json')     .then(response => response.json())     .then(user => fetch(`https://api.github.com/users/${user.name}`))     .then(response => response.json())     .then(githubUser => new Promise((resolve, reject) => {         let img = document.createElement('img');         img.src = githubUser.avatar_url;         img.className = "promise-avatar-example";         document.body.append(img);         setTimeout(() => {             img.remove();             resolve(githubUser);         }, 3000); 

async/await 中的錯誤處理

async/await里的錯誤處理非常直觀，可以使用傳統(tǒng)的try/catch語句來捕獲異常。

1. 使用try/catch語句：在async函數(shù)中，可以使用try/catch語句來捕獲和處理錯誤。try塊包含可能會拋出錯誤的代碼，而catch塊則處理這些錯誤。

   async function fetchData() {   try {     let response = await fetch('https://api.example.com/data');     let data = await response.json();     console.log(data);   } catch (error) {     console.error('獲取數(shù)據(jù)時出錯:', error);   } } fetchData(); 

2. 處理多個異步操作中的錯誤：如果有多個異步操作，可以在每個操作中使用try/catch，或者在一個大的try/catch塊中處理所有操作。

   async function fetchMultipleData() {   try {     let response1 = await fetch('https://api.example.com/data1');     let data1 = await response1.json();     let response2 = await fetch('https://api.example.com/data2');     let data2 = await response2.json();     console.log(data1, data2);   } catch (error) {     console.error('獲取數(shù)據(jù)時出錯:', error);   } } fetchMultipleData(); 

3. 使用.catch方法：除了try/catch，還可以在調(diào)用async函數(shù)時使用.catch方法來處理錯誤。

   async function fetchData() {   let response = await fetch('https://api.example.com/data');   let data = await response.json();   return data; }  fetchData()   .then((data) => {     console.log(data);   })   .catch((error) => {     console.error('獲取數(shù)據(jù)時出錯:', error);   }); 

總結(jié)

• ?? try...catch 語句是 JavaScript 中最常用的錯誤處理方式。

• ?? 使用throw語句手動拋出錯誤，拋出的錯誤可以是任何類型，但通常是Error對象。

• ?? JavaScript 中的錯誤對象包含message、name和stack屬性。