await 本身不处理加载失败或超时，真正决定“怎么等”的是传入的 Promise；需用 try/catch 捕获 reject 错误，配合 Promise.race 实现超时控制，并可结合重试机制与 UI 状态管理提升鲁棒性。
await 本身不处理加载失败或超时，它只是暂停函数执行、等待 Promise 完成——真正决定“怎么等”的，是你给它传进去的那个 Promise。
用 try/catch 捕获加载失败
await 后的 Promise 若被 reject，会直接抛出错误，必须用 try/catch 捕获，否则会中断执行或变成未捕获异常。
- 网络请求失败（如 404、500、断网）会触发 catch
- JSON 解析错误、类型校验失败也应放在 try 块内统一处理
- 避免在 await 后写 .catch()，破坏 async/await 的线性可读性
try {
const res = await fetch('/api/data');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
console.log(data);
} catch (err) {
console.error('加载失败：', err.message);
// 可降级显示空状态、缓存数据或错误提示
}手动添加超时控制
原生 await 不带超时，需配合 Promise.race 构造一个带时限的 Promise。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 创建一个在指定毫秒后 reject 的 timeout Promise
- 与目标异步操作 race，谁先 settled 就取谁的结果
- 注意：超时后原请求仍在后台运行，必要时调用 abort() 中止
function withTimeout(promise, ms) {
const timeout = new Promise((_, reject) =>
setTimeout(() => reject(new Error('请求超时')), ms)
);
return Promise.race([promise, timeout]);
}
<p>try {
const data = await withTimeout(fetch('/api/data').then(r => r.json()), 5000);
} catch (err) {
console.error(err.message); // "请求超时" 或其他错误
}结合重试机制提升鲁棒性
对偶发性失败（如网络抖动），可封装带指数退避的重试逻辑。
立即学习“Java免费学习笔记（深入）”；
- 设定最大重试次数和初始延迟，每次失败后延迟翻倍
- 仅对特定错误类型重试（如网络错误），避免重复提交表单类操作
- 重试过程中可更新 UI 状态（如显示“重试中…”）
async function retryFetch(url, options = {}, maxRetries = 3) {
for (let i = 0; i <= maxRetries; i++) {
try {
const res = await fetch(url, options);
if (res.ok) return res.json();
if (i === maxRetries) throw new Error(`HTTP ${res.status}`);
} catch (err) {
if (i === maxRetries) throw err;
await new Promise(r => setTimeout(r, Math.pow(2, i) * 100));
}
}
}加载状态与 UI 协同管理
await 是同步语义的“等待”，但用户需要感知过程——需显式管理 loading、error、success 状态。
- 在 await 前置设置 loading = true，catch 中设 error = err，finally 中设 loading = false
- 避免多个 await 连续写导致状态覆盖，可用 Promise.all 并行请求并统一控制状态
- 对部分资源失败做容错（如头像加载失败显示默认图），而非整个流程失败
