JavaScript Promise有哪些常見錯誤

JavaScript Promises 是一種異步編程模式，它允許你編寫更清晰、更易于維護的異步代碼。然而，在使用 Promises 時，你可能會遇到一些常見錯誤。以下是一些常見的 Promise 錯誤及其解決方法：

1. 忘記鏈接 .then() 或 .catch()

   當你在一個 Promise 鏈中忘記鏈接 .then() 或 .catch() 時，你可能會遇到未處理的錯誤或異常。確保在每個 .then() 之后都鏈接一個 .catch() 來捕獲任何可能的錯誤。

   // 錯誤示例
   fetchData()
     .then(data => {
       // 處理數據
     })
     // 缺少 catch() 來捕獲錯誤
     .then(data => {
       // 處理更多數據
     });
   
   // 正確示例
   fetchData()
     .then(data => {
       // 處理數據
     })
     .catch(error => {
       // 捕獲錯誤
     })
     .then(data => {
       // 處理更多數據
     });
   

2. 忘記鏈接 .finally()

   雖然 .finally() 不是必需的，但它是一個有用的方法，可以在 Promise 鏈的末尾執行一些清理操作，無論 Promise 是解析還是拒絕。確保在 .then() 或 .catch() 之后鏈接一個 .finally()。

   fetchData()
     .then(data => {
       // 處理數據
     })
     .catch(error => {
       // 捕獲錯誤
     })
     .finally(() => {
       // 清理操作
     });
   

3. 在 .then() 中拋出錯誤

   在 .then() 中拋出錯誤時，確保使用 throw 語句而不是返回一個 rejected 的 Promise。這樣，錯誤可以被捕獲并傳遞給后續的 .catch()。

   fetchData()
     .then(data => {
       if (error) {
         throw error; // 使用 throw 而不是返回 rejected 的 Promise
       }
       // 處理數據
     })
     .catch(error => {
       // 捕獲錯誤
     });
   

4. 鏈式調用中的錯誤處理

   當你在鏈式調用中使用 .then() 時，確保在每個 .then() 中正確處理錯誤。如果你在一個 .then() 中忘記鏈接 .catch()，錯誤將不會被捕獲，可能會導致程序崩潰。

   fetchData()
     .then(data => {
       // 處理數據
     })
     .then(data => {
       // 如果這里發生錯誤，它將被忽略，因為缺少 catch()
     })
     .catch(error => {
       // 捕獲錯誤
     });
   

5. 使用 async/await 時忘記使用 try/catch

   當你使用 async/await 時，你可能會忘記使用 try/catch 語句來捕獲異步操作中的錯誤。確保在 async 函數中使用 try/catch 來捕獲錯誤。

   async function fetchData() {
     try {
       const response = await fetch('https://api.example.com/data');
       const data = await response.json();
       // 處理數據
     } catch (error) {
       // 捕獲錯誤
     }
   }
   

6. 在 .then() 中忘記返回值

   在 .then() 中，確保返回值以便在后續的 .then() 中繼續鏈式調用。如果你忘記返回值，后續的 .then() 將接收到 undefined，而不是預期的數據。

   fetchData()
     .then(data => {
       // 如果忘記返回值，后續的 .then() 將接收到 undefined
       return data;
     })
     .then(data => {
       // 處理數據
     });
   

通過避免這些常見錯誤，你可以確保你的 Promise 代碼更加健壯和易于維護。