5個async/await最佳實踐

前端小智發表於2023-04-20
AI
微信搜尋 【大遷世界】, 我會第一時間和你分享前端行業趨勢，學習途徑等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

快來免費體驗ChatGpt plus版本的，我們出的錢
體驗地址:https://chat.waixingyun.cn/#/home
可以加入網站底部技術群，一起找bug.

這篇文章介紹了使用 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: 不要在沒有適當考慮的情況下混合使用同步和非同步程式碼

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

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

  • 當我們需要從同步方法呼叫非同步方法時：在這種情況下，可以使用 await 關鍵字暫停同步方法並等待非同步方法完成。
  • 當我們需要從非同步方法呼叫同步方法時：在這種情況下，可以使用 Task.Run() 方法在單獨的執行緒上執行同步方法。

以下是從同步方法呼叫非同步方法的示例：

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
}

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

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

https://levelup.gitconnected.com/5-async-await-best-practices...

相關文章