

新闻资讯
行业动态Promise 是“未来值的占位符”,调用后返回 Promise 实例而非最终值;return 无法直接获取结果,须用 .then() 链式处理或 async/await(需在 async 函数内使用)。
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 在支持的上下文中“暂停”等待。
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”,但失败策略完全不同,选错会导致静默失败或过早退出。
关键区别:
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,旧版需 polyfillawait 后的 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) {
// 这里永远进不来
}
}
实际项目里,最常被忽略的是「reject 的来源分层」:网络层(fetch 抛异常)、HTTP 层(4xx/5xx)、业务层(API 返回 { code: 401 })。Promise 和 async/await 只解决第一层等待问题,后面两层还得靠主动判断。