async、await与Promise

一、async 标记的函数是什么？

async function foo() {
  return 123;
}

➡️ 结论：async 标记的函数相当于一个 Promise 函数（即返回 Promise 对象的函数）。

解释：

• 它本质是一个普通函数；
• 但调用后，返回一个 Promise 对象；
• 返回值 123 会被自动包装成 Promise.resolve(123)。

验证：

const p = foo();
console.log(p instanceof Promise); // ✅ true

所以：

✅ “async 标记的函数 ≠ Promise 对象本身”，
而是“返回 Promise 对象的函数”。

二、await 标记的是什么？

await 用来等待一个 Promise 对象的结果。

const data = await fetchData();

• 如果 fetchData() 返回一个 Promise（比如通过 async 定义的），await 会暂停当前函数，直到 Promise 被 resolve；
• 如果返回的不是 Promise，JS 会自动执行 Promise.resolve(非Promise值)，所以也可以等待一个普通值。

👉 换句话说：

await 后面通常接 Promise 对象（或任何可以转成 Promise 的值）。

示例：

await 123; // 等价于 await Promise.resolve(123)

三、Promise.all 接受的是什么？

Promise.all() 接受的是 Promise 对象数组。

Promise.all([p1, p2, p3])

如果你传进去函数，比如 [foo, bar]，是不会起作用的，必须执行成对象：

// 错误 ❌
Promise.all([fetchA, fetchB]); // 不会等待

// 正确 ✅
Promise.all([fetchA(), fetchB()]);

四、整体关系图 🧩

概念	类型	说明
Promise	构造函数	用来 new 出 Promise 对象
Promise 对象	异步结果容器	有 then、catch 方法
async 函数	返回 Promise 的函数	是 Promise 的语法糖
await 表达式	Promise 解包工具	等待 Promise 结果
Promise.all([...])	Promise 组合器	接收 Promise 对象数组

五、简单示例 🌱

async function getData() {
  const a = await fetchA(); // 等待 PromiseA
  const b = await fetchB(); // 等待 PromiseB
  return a + b;             // 自动封装成 Promise.resolve(a + b)
}

const p = getData(); // 返回 Promise 对象
p.then(res => console.log(res)); // 获取结果

// 并行执行
await Promise.all([fetchA(), fetchB()]);

六、Promise 链式调用

new Promise(resolve => resolve(1))
  .then(x => x + 1)
  .then(x => x * 3)
  .then(x => console.log(x)); // 输出 6

每个 then 都返回一个新的 Promise，因此可以链式调用。

七、常见坑

不要在 forEach 中使用 await：
forEach 不会等待回调中的异步操作；
它只是按顺序立即调用所有回调函数；
如果回调是 async，那它会返回 Promise，但 forEach 不会处理它。

arr.forEach(async item => {
  await doSomething(item); // ❌ 外部不会等待
});

正确写法：

for (const item of arr) {
  await doSomething(item);
}

或并行执行：

await Promise.all(arr.map(item => doSomething(item)));

---

✅ 一句话总结

• async 标记的函数 → 返回 Promise 对象；
• await → 等待 Promise 对象；
• Promise.all() → 接受 Promise 对象数组。