JavaScript Async Await 完全指南

Async/Await 讓非同步程式碼看起來像同步程式碼，大幅提升可讀性。但若缺乏深入理解，反而容易寫出效能低落的程式。

基礎語法

async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  const user = await response.json();
  return user;
}

async 函式永遠回傳 Promise，即使你回傳的是普通值。

錯誤處理

async function getUserData(id) {
  try {
    const user = await fetchUser(id);
    return { success: true, data: user };
  } catch (error) {
    return { success: false, error: error.message };
  }
}

常見效能陷阱

❌ 串行執行（慢）：

const users = await fetchUsers();
const posts = await fetchPosts();

✅ 並行執行（快）：

const [users, posts] = await Promise.all([fetchUsers(), fetchPosts()]);

進階模式

Promise.allSettled

const results = await Promise.allSettled([fetchUser(1), fetchUser(2), fetchUser(3)]);
const successful = results.filter(r => r.status === 'fulfilled').map(r => r.value);

超時控制

function withTimeout(promise, ms) {
  const timeout = new Promise((_, reject) =>
    setTimeout(() => reject(new Error('Timeout')), ms)
  );
  return Promise.race([promise, timeout]);
}