5 個 async-await 最佳實踐

這篇文章介紹了使用 async/await 編寫異步代碼的 5 個最佳實踐。文章中的第一個建議是在所有異步代碼中使用 async/await。這樣做的好處有以下幾點：首先，它使代碼庫保持一致性。通過在所有異步代碼中使用 async/await，你可以保持一致的代碼編寫和組織方式。此外，async/await 有助於提高代碼可讀性和易於維護。這是因爲使用 async/await 可以使代碼看起來更像同步代碼，從而使其更容易理解和修改。總之，使用 async/await 是編寫高效、易於維護的異步代碼的關鍵。

下面是正文：

在這篇博客文章中，我們將討論async/await - 一種在各種編程語言中編寫異步代碼的強大工具。

但首先，讓我們定義async/await。簡單來說，async/await是一種編寫異步代碼的方式，它看起來和行爲像同步代碼。它允許我們暫停函數的執行，等待 promise  解決，然後從離開的地方繼續。

快速示例：

async function getData() {
  const response = await fetch('https://example.com/data');
  const data = await response.json();
  return data;
}

注意 fetch 和 response.json 的調用被包裹在 await 語句中。這使得函數在繼續執行下一行之前暫停並等待 Promise 解決。

爲什麼 async/await 很重要

異步編程在當今高併發應用程序的世界中是必不可少的。無論是構建 Web 應用程序、移動應用程序還是後端服務，都有可能需要在某個時候使用 async/await。

改進的性能和可擴展性

async/await允許我們編寫非阻塞代碼，這意味着應用程序可以處理更多併發請求，而不會遇到性能瓶頸。

增強用戶體驗

async/await 可以幫助我們創建更具響應性和交互性的應用程序，從而帶來更好的用戶體驗。

更好的代碼結構和可讀性

async/await 使編寫乾淨有組織的代碼更加容易，這在應用程序規模和複雜性增加時尤爲重要。

提高生產力

通過簡化異步編程，async/await 可以幫助我們在更短的時間內完成更多的工作。

Tips1: 對於所有異步代碼，請使用 async/await

使用async/await處理所有異步代碼是個好主意，原因有幾個。首先，它可以促進代碼庫的一致性。通過使用async/await處理所有異步代碼，我們將擁有一種一致的編寫和組織代碼的方式。這使得其他開發人員更容易理解和維護你的代碼庫。

async/await還可以使用 try/catch 塊輕鬆捕獲和處理錯誤。在處理 Promise 時，這尤其有用，因爲如果沒有適當的錯誤處理，Promise 可能很難調試。

最後，使用async/await在某些情況下可以提高性能，特別是與 await 關鍵字結合使用時。

以下是使用 async/await 處理所有異步代碼的幾個示例：

// Example 1: Using async/await with promises
async function getData() {
  try {
    const response = await fetch('https://example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

// Example 2: Using async/await with async/await functions
async function processData(data) {
  try {
    const processedData = await transformData(data);
    await saveData(processedData);
  } catch (error) {
    console.error(error);
  }
}

Tips2: 在 try/catch 塊中使用 await 處理錯誤

處理錯誤是編寫可靠且易於維護的代碼的重要部分。在使用async/await時，最好在 try/catch 塊內使用 await 關鍵字來正確處理錯誤。

下面是在 try/catch 塊中使用 await 的示例：

async function getData() {
  try {
    const response = await fetch('https://example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

在這個例子中， fetch 和 response.json 的調用被包含在 await 語句中，位於 try 塊內。如果發生錯誤，它將被 catch 塊捕獲並記錄到控制檯。

在 async/await 代碼中，使用 try/catch 塊內的 await 是處理錯誤的簡單有效方法。

Tips3: 避免在 async/await 中使用 .then() 和 .catch()

JavaScript 中通常使用 .then() 和 .catch() 方法來處理 Promise。然而，當使用async/await時，通常最好避免使用 .then() 和 .catch() ，而是使用 try/catch 塊。

這是一個使用 try/catch 塊而不是 .then() 和 .catch() 的示例：

async function getData() {
  try {
    const response = await fetch('https://example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

Tips4:  避免使用 async  void 函數，除了事件處理程序。

Async void 函數是使用 async 關鍵字標記的函數。雖然在某些情況下可以使用異步無返回值函數，但通常應避免使用。示例：

async void DoWork() {
  // Async code here
}

async void 函數可能會有問題，因爲它們不返回值，這使得處理錯誤和確定函數何時完成變得困難。 通常最好使用  async Task 或  async Task<T> 函數。這些類型的函數允許我們返回值並更輕鬆地處理錯誤。

這是一個異步任務函數的示例：

async Task DoWork() {
  // Async code here
}

有一種情況可以使用 async void 函數：事件處理程序。async void 事件處理程序通常用於 UI 編程，以執行異步操作而不阻塞 UI 線程。

這是一個 async void  事件處理程序的示例：

private async void Button_Click(object sender, RoutedEventArgs e) {
  // Async code here
}

Tips5: 不要在沒有適當考慮的情況下混合使用同步和異步代碼

混合同步和異步代碼可能會導致許多問題，包括性能問題、死鎖和競爭條件。通常最好避免混合同步和異步代碼，除非你有充分的理由這樣做。

有一些情況下，混合使用同步和異步代碼是可以的：

以下是從同步方法調用異步方法的示例：

public void DoWork() {
  // Sync code here
  await DoAsyncWork();
  // Sync code here
}

public async Task DoAsyncWork() {
  // Async code here
}

以下是從異步方法調用同步方法的示例：

public async Task DoAsyncWork() {
  // Async code here
  await Task.Run(() => DoSyncWork());
  // Async code here
}

public void DoSyncWork() {
  // Sync code here
}

除非有特定的原因，否則通常最好避免混合使用同步和異步代碼。混合使用同步和異步代碼可能會導致性能問題、死鎖和競爭條件。但是，在某些情況下，有必要混合使用同步和異步代碼，例如從同步方法調用異步方法或從異步方法調用同步方法。在混合使用同步和異步代碼時，重要的是要正確處理錯誤並考慮對性能和可維護性的潛在影響。

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

猜你喜歡