使用 async/await 可讓異步代碼更易讀和維護。1. 必須在 async 函數(shù)內(nèi)使用 await，否則會報錯，除非環(huán)境支持頂層 await；2. 使用 try/catch 處理錯誤，避免未捕獲的 Promise 拒絕；3. 盡量并行執(zhí)行獨立的異步操作，避免不必要的串行等待，可借助 Promise.all 提升性能。正確使用 async/await 需注意始終處理 Promise 結(jié)果、合理管理錯誤并優(yōu)化執(zhí)行順序，這樣才能高效編寫異步代碼。

You work with async/await in JavaScript by writing asynchronous code that looks and behaves more like synchronous code, making it easier to read and maintain. Here's how it works and how to use it effectively.

What is async/await?

async/await is built on top of Promises and provides a cleaner syntax for handling asynchronous operations. An async function always returns a Promise, and await can only be used inside an async function to pause execution until the Promise settles.

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

This is much cleaner than chaining .then() calls.

How to Use async/await Properly

1. Always use await inside async functions

You can't use await at the top level of your script unless you're in a module with top-level await (available in modern environments).

// ? Works
async function getUser() {
  const res = await fetch('/user');
  return await res.json();
}

// ? Throws error (unless in module with top-level await)
// const data = await fetch('/user').then(r => r.json());

If you're not in an async function, you'll need to fall back to .then() or wrap the code in an async IIFE:

(async () => {
  const data = await fetchData();
  console.log(data);
})();

2. Handle errors with try/catch

Since await can cause the code to throw if the Promise is rejected, wrap it in a try/catch block.

async function safeFetch() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) throw new Error('Network error');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch failed:', error.message);
  }
}

This is cleaner than using .catch() on Promises.

3. Run async operations in parallel when possible

Using await one after another blocks execution. If you need multiple independent async operations, start them all first, then await their results.

async function fetchMultiple() {
  // ? Slower: one after another
  // const a = await fetch('/a');
  // const b = await fetch('/b');

  // ? Faster: run in parallel
  const promiseA = fetch('/a');
  const promiseB = fetch('/b');

  const resA = await promiseA;
  const resB = await promiseB;

  return [await resA.json(), await resB.json()];
}

Or use Promise.all() for even cleaner syntax:

const [dataA, dataB] = await Promise.all([
  fetch('/a').then(res => res.json()),
  fetch('/b').then(res => res.json())
]);

Common Pitfalls to Avoid

• Forgetting await: If you forget await, you get a Promise instead of the resolved value.
• Top-level await support: Not available in all environments (e.g., older Node.js or non-module scripts).
• Overusing await serially: Can slow down your app unnecessarily.
• Not handling errors: Uncaught rejections can crash your app.

Basically, async/await makes async code easier to write and debug — just remember it's just syntactic sugar over Promises. Use try/catch, avoid unnecessary blocking, and handle edge cases. That’s how you work with it well.

以上是您如何與JavaScript中的Async/等待Async/等待？的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！