我終於搞懂了 try-catch 與 async-await

在 JavaScript 中，異步編程是一個非常常見的技巧。爲了處理異步操作，ES2017 引入了 async/await 語法糖。async 和 await 是一種更優雅的方式來處理異步代碼，使得異步代碼看起來像同步代碼。但是，在使用 async/await 時，我們是否需要添加 try-catch 塊來捕獲錯誤呢？

async/await 的基本用法

在討論 try-catch 是否必須的之前，我們先來看一下 async/await 的基本用法。

async function fetchUser() {
  const response = await fetch('/api/user');
  const data = await response.json();
  return data;
}

fetchUser().then(user => {
  console.log(user);
});

在這個例子中，我們定義了一個 async 函數 fetchUser()，它會請求一個用戶 API 並返回 JSON 數據。我們使用 await 關鍵字等待每個異步操作完成。最後，我們將數據返回給調用者。

爲什麼要使用 try-catch？

當我們使用異步代碼時，我們需要考慮到可能發生的異常情況。如果我們沒有正確地處理這些異常，那麼我們的應用程序可能會崩潰或出現其他問題。在 async/await 中，我們可以使用 try-catch 塊來捕獲並處理這些異常。

儘管我們已經使用了 await 來處理異步代碼，但它並不能像同步代碼那樣保證一定不會出錯。如果在 fetch() 方法中發生了網絡錯誤，它將拋出一個異常。此時，我們需要使用 try-catch 塊來捕獲這個異常。

async function fetchUser() {
  try {
    const response = await fetch('/api/user');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

fetchUser().then(user => {
  console.log(user);
});

在這個例子中，我們使用 try-catch 塊來捕獲可能的異常。當發生錯誤時，我們打印錯誤消息到控制檯中。

使用 Promise 處理未捕獲的異常

在實踐中，即使我們添加了 try-catch 塊，仍然有可能出現未捕獲的異常。例如，如果我們忘記在 catch 語句中添加適當的代碼，那麼異常將被傳遞給調用者，並可能導致應用程序崩潰。

爲了避免這種情況，我們可以使用 Promise.catch() 來處理未捕獲的異常。在 async/await 中，我們可以使用 try-catch 來捕獲異常，並將其包裝在一個 Promise 對象中。

下面是一個完整的示例代碼，展示瞭如何使用 async/await 和 try-catch 塊來處理異步操作中的異常：

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
    throw error;
  }
}

fetchData()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

在這個例子中，我們定義了一個名爲 fetchData() 的 async 函數，它會請求數據 API 並返回 JSON 數據。我們在該函數中添加了 try-catch 塊來捕獲可能的異常。當發生錯誤時，我們打印錯誤消息到控制檯並拋出錯誤。

在調用 fetchData() 函數時，我們使用 Promise 對象來處理結果。如果成功，我們將數據打印到控制檯中；否則，我們將錯誤消息打印到控制檯中。

結論

雖然 async/await 非常簡潔，但它並不能保證不會發生任何異常。因此，在使用 async/await 時，我們建議您添加 try-catch 塊來捕獲可能的異常。如果您確實遇到了未捕獲的異常，那麼您可以使用 Promise.catch() 來處理它們。

使用 try-catch 塊不僅可以幫助我們編寫更健壯的代碼，還可以提高代碼的可讀性和可維護性。因此，即使您的代碼沒有出現任何異常，我們仍然建議您添加 try-catch 塊。

當然，在某些情況下，您可能不需要使用 try-catch 塊。例如，如果您有一個全局的錯誤處理程序來處理未捕獲的異常，那麼在每個 async 函數中添加 try-catch 塊可能是多餘的。但是，這並不意味着您可以無視異常情況。

在使用 async/await 時，添加 try-catch 塊是一個良好的編程實踐，它可以幫助我們編寫更健壯、可讀性更高和可維護性更好的異步代碼。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/UIzuKzzy4-EmaYcTPNupKQ

猜你喜歡