JavaScript 中的 Async 与 Await（新手简易讲解）

Source: Dev.to

Introduction

在了解了异步 JavaScript 之后，下一个重要概念是 async 和 await。
它们帮助我们以简洁、可读的方式编写异步代码。

What is async?

async 是在函数前使用的关键字。它告诉 JavaScript：

这个函数将处理异步代码，并且始终返回一个 Promise。

Example

async function greet() {
  return "Hello World";
}

greet().then(result => console.log(result));

What is await?

await 在 async 函数内部使用。它告诉 JavaScript：

在这里等待，直到异步任务完成，然后继续执行。

Simple Example (Code)

function getData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data received");
    }, 2000);
  });
}

async function showData() {
  console.log("Fetching data...");
  const result = await getData();
  console.log(result);
}

showData();

Output

Fetching data...
Data received

即使它在等待，浏览器也不会卡死。

Real‑Life Example (Very Easy)

Online Shopping Analogy

Without await:

• 你下单购买商品。
• 你一直在询问 “它送到了吗？”
• 代码变得混乱 😵

With async / await:

• 你下单 🛒
• 你安静地等待。
• 当快递到达时，你打开它 📦

结果：代码干净、可读且易于理解。

Why Use Async & Await?

• 让异步代码看起来像同步代码。
• 对新人友好，易于掌握。
• 避免凌乱的 .then() 链。
• 提高可读性和调试效率。

Rules to Remember

• await 只能在 async 函数内部使用。
• async 函数始终返回一个 Promise。
• await 暂停的是 函数，而不是整个程序。