JavaScript如何实现异步编程_你了解Promise和Async_Await吗_技术教程

Promise 是“未来值的占位符”，调用后返回 Promise 实例而非最终值；return 无法直接获取结果，须用 .then() 链式处理或 async/await（需在 async 函数内使用）。

Promise 是什么，为什么不能用 return 拿到结果

Promise 不是立即返回值的容器，而是一个“未来值的占位符”。你调用一个返回 Promise 的函数（比如 fetch() 或 new Promise()），得到的永远是 Promise 实例，不是它内部 resolve 的那个值。直接写 return promise.then(...) 依然返回一个新的 Promise，不是最终数据。

常见错误现象：

在函数里写了 promise.then(data => data)，但函数外拿到的是 undefined 或 Promise，不是 data
试图用 const result = someAsyncFunc() 然后直接 console.log(result.name) —— 报错 Cannot read property 'name' of undefined

正确做法只有两个：链式 .then() 处理，或用 async/await 在支持的上下文中“暂停”等待。

async/await 必须写在 async 函数里，否则会语法报错

await 是个操作符，不是函数，也不能脱离 async 函数单独使用。把它写在普通函数、全局作用域、或箭头函数（没加 async）里，会直接触发 SyntaxError: await is only valid in async function。

使用场景和要点：

async 函数本身返回一个 Promise，所以它可被其他 async 函数 await，也可被 .then() 消费
await 只能“解包” Promise，对普通值（如字符串、对象）会自动包装成已 resolve 的 Promise
不能 await 一个未返回 Promise 的函数——哪怕它内部有异步逻辑，若没显式返回 Promise，await 就等于白等

async function getUser() {
  const res = await fetch('/api/user');
  const data = await res.json(); // 注意：res.json() 也返回 Promise
  return data;
}

// ✅ 正确调用方式
getUser().then(user => console.log(user));

// ❌ 错误：顶层 await（仅限 ES2025+ 模块顶层，且非所有环境支持）
// await getUser();

// ❌ 错误：普通函数里用 await
function bad() {
  await getUser(); // SyntaxError
}

Promise.all 和 Promise.race 的行为差异直接影响错误处理逻辑

Promise.all() 和 Promise.race() 看似都是“并发执行多个 Promise”，但失败策略完全不同，选错会导致静默失败或过早退出。

关键区别：

Promise.all([p1, p2, p3])：只要任意一个 reject，整个就立即 reject；全部 resolve 才返回数组结果
Promise.race([p1, p2, p3])：谁先 settle（无论 resolve/reject），就以它的结果为准，其余被忽略
如果想“不管失败，只取成功结果”，得用 Promise.allSettled()（ES2025+）

性能与兼容性影响：

Promise.race() 常用于超时控制，例如 Promise.race([fetch(...), timeout(5000)])
Promise.all() 在接口必须全成功时才适用；若其中一个慢或失败，整个请求就垮，不适合松耦合场景
Promise.allSettled() 兼容性需注意：Node.js ≥12.9，Chrome ≥89，旧版需 polyfill

try/catch 捕获 await 错误，但不会捕获未 await 的 Promise 内部异常

await 后的 Promise 如果 reject，会被 try/catch 捕获，看起来像同步错误。但如果你忘了 await，那个 Promise 就变成“悬浮 Promise”，其 rejection 会变成未处理拒绝（unhandledrejection），可能触发全局错误或被忽略。

容易踩的坑：

写了 fetch('/api/data') 却没 await，也没接 .catch() → 控制台警告 Unhandled promise rejection
在 try 块中调用多个 await，但只包了第一个 → 后续的 reject 仍会冒泡出函数
catch 捕获的是 Promise rejection，不是网络错误本身（如 DNS 失败、连接中断），那些通常由 fetch 返回的 Response 对象状态码体现，需手动检查 res.ok

async function loadData() {
  try {
    const res = await fetch('/api/data'); // ✅ await 了
    if (!res.ok) throw new Error(`HTTP ${res.status}`);

    const data = await res.json(); // ✅ await 了
    return data;
  } catch (err) {
    console.error('加载失败:', err.message);
    throw err;
  }
}

// ❌ 危险：忘记 await，错误不会进 catch
async function badExample() {
  try {
    fetch('/api/data'); // ← 没 await，没 catch，错误丢失
  } catch (e) {
    // 这里永远进不来
  }
}