async/await

async/await 是 JavaScript 中用於處理異步操作的一種現代語言特性,它使開發者能夠以同步的方式編寫異步代碼,使異步代碼更容易編寫和理解,並提供了更好的錯誤處理機制。

它通常與 Promise 結合使用,以便執行異步操作並等待它們的結果。

async 異步函數

  • async 關鍵字用於定義一個異步函數。異步函數返回一個 Promise 對象,它包裝了函數的執行結果(無論是成功還是失敗)。
  • 異步函數內部可以包含異步操作,例如異步請求、定時器等。
async function myAsyncFunction() {
  // 異步操作
  return result; // 返回結果,將被包裝成一個已解決的 Promise
}

await 表達式

  • await 關鍵字用於等待一個 Promise 解決,並返回 Promise 解決後的結果。它只能在異步函數內部使用。
  • 當 await 表達式執行時,它會阻塞異步函數的執行直到 somePromise 解決。在等待期間,其他代碼可以繼續執行,不會被阻塞。
const result = await somePromise; // 等待 somePromise 解決,並獲取結果
  • 當你在一個 async 函式中使用 await 關鍵字等待一個 Promise 解析時,你不需要明確地使用 return 來返回 Promise 的解析值。當你使用 await 等待 Promise 解析時,該值將自動成為該 async 函式的返回值。
async function fetchData() {
    const data = await fetch('https://example.com/data'); // 使用 await 等待 Promise 解析
    // 這裡不需要使用 return,data 將成為返回值
    console.log(data);
}

fetchData(); // 此處不需要使用 .then(),因為 async 函式的返回值是 Promise

trycatch 錯誤處理

  • 在異步函數中,你可以使用 trycatch 塊來捕獲異步操作可能拋出的錯誤。
async function myAsyncFunction() {
  try {
    const result = await somePromise;
    // 處理成功情況
  } catch (error) {
    // 處理錯誤情況
  }
}

示例-如何使用 async/await 處理異步操作

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('請求失敗');
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('發生錯誤:', error);
    throw error; // 重新拋出錯誤,可以在調用代碼中處理
  }
}

在上述示例中,fetchData 函數等待一個網絡請求完成,如果請求失敗或解析 JSON 數據時出錯,會捕獲錯誤並處理它。