如何正確處理JavaScript中的Promise錯誤

一、什麼是Promise錯誤

請大家先來回憶一下：Promise是一種用於處理非同步操作的對象。在JavaScript中，我們在使用非同步操作來獲取數據時通常會使用Promise對象，並在這個Promise對象中以回調函數的形式處理返回結果。

而當非同步操作發送了錯誤，Promise會進入rejected狀態，此時如果沒有正確處理錯誤，程序就會崩潰。

二、Promise錯誤的處理

1. 使用.then()處理Promise

在Promise對象中使用.then()方法處理成功返回後的回調和錯誤返回後的回調。如下面代碼片段所示：

fetch('https://www.example.com/api/data')
  .then(response => response.json())
  .then(data => {
    // handle success case
  })
  .catch(error => {
    // handle error case
  });

以上代碼中，fetch()返回的Promise對象通過.then()方法中的回調函數被處理。如果fetch()返回錯誤，會進入.catch()方法中的回調函數進行錯誤處理。

2. 使用try…catch語句塊處理Promise

當Promise被reject時，可以使用try…catch語句塊進行處理

(async function() {
  try {
    const result = await fetch('https://www.example.com/api/data');
    const data = await result.json();
    // handle success case
  } catch (error) {
    // handle error case
  }
})();

以上代碼中，使用await關鍵字等待fetch()返回，如果發生錯誤，則進入catch語句塊中進行錯誤處理。

3. 使用Promise.all()處理Promise

當同時需要處理多個Promise時，可以使用Promise.all()方法進行處理，如下所示：

Promise.all([
  fetch('https://www.example.com/api/data1'),
  fetch('https://www.example.com/api/data2')
])
.then(([response1, response2]) => {
  return Promise.all([response1.json(), response2.json()]);
})
.then(([data1, data2]) => {
  // handle success case
})
.catch(error => {
  // handle error case
});

以上代碼中，Promise.all()接收到包含兩個fetch() Promise對象的數組。如果兩個Promise對象都成功，.then()回調函數將接收到一個包含兩個response的數組，再用Promise.all()等待json()請求結果。如果Promise對象之一發生錯誤，.catch()方法中的回調將處理錯誤。

三、錯誤處理最佳實踐

1. 程序崩潰

在Promise發生錯誤時，如果無法處理該錯誤，則應該讓程序發生崩潰退出。

fetch('https://www.example.com/api/data')
  .then(response => response.json())
  .then(data => {
    // handle success case
  })
  .catch(error => {
    // handle error case
    throw error; // let program crash
  });

2. 日誌記錄

應該在程序中記錄錯誤，以便在調試時找到問題。日誌可以使用console.log()，也可以使用其他第三方日誌庫。

fetch('https://www.example.com/api/data')
  .then(response => response.json())
  .then(data => {
    // handle success case
  })
  .catch(error => {
    // handle error case
    console.error('Request failed', error);
  });

3. 提供錯誤代碼

應該在錯誤處理中包含錯誤代碼，這對於快速定位和解決問題非常有幫助。

fetch('https://www.example.com/api/data')
  .then(response => response.json())
  .then(data => {
    // handle success case
  })
  .catch(error => {
    // handle error case
    console.error('Request failed with error code', error.status);
  });

4. 錯誤信息變數

當捕獲錯誤時，可以將錯誤信息存儲在變數中，這將使程序更具可讀性。

fetch('https://www.example.com/api/data')
  .then(response => response.json())
  .then(data => {
    // handle success case
  })
  .catch(error => {
    // handle error case
    const errorMessage = 'Request failed with error code' + error.status;
    console.error(errorMessage);
  });

總結

本文介紹了處理JavaScript中Promise錯誤的幾種方法，包括使用.then()方法處理Promise、使用try…catch語句塊處理Promise、使用Promise.all()方法處理Promise。同時，我們還介紹了處理Promise錯誤的最佳實踐，包括程序崩潰、日誌記錄、提供錯誤代碼和存儲錯誤信息變數。