掌握Promise和async/await最佳实践可提升代码可读性与健壮性：合理使用链式调用并始终添加.catch()处理错误；优先使用async/await结合try/catch增强可读性；避免忘记await、循环中串行await及未清理的异步任务；封装通用逻辑如带重试的请求，确保结构清晰、错误可控、资源不泄露。
在现代JavaScript开发中，异步编程是处理网络请求、文件操作和定时任务的核心。随着语言的发展，Promise 和 async/await 成为管理异步逻辑的标准方式。掌握它们的最佳实践，能显著提升代码的可读性与健壮性。
合理使用 Promise 链与错误处理
Promise 让我们摆脱了“回调地狱”，但如果不规范使用，仍可能写出难以维护的链式调用。
避免过长的 .then() 链，尤其是在每个步骤都可能出错的情况下。始终在 Promise 链末尾添加 .catch() 捕获异常：
- 确保每个异步流程都有统一的错误出口
- 避免未捕获的 Promise rejection 导致应用崩溃
- 在 .catch() 中做日志记录或用户提示
例如：
fetch('/api/data').then(res => res.json())
.then(data => { /* 处理数据 */ })
.catch(error => console.error('请求失败:', error));
优先使用 async/await 提升可读性
async/await 是基于 Promise 的语法糖，让异步代码看起来像同步代码，更符合人类阅读习惯。
在函数内部使用 await 时，注意以下几点：
- 函数必须标记为 async，否则 await 无效
- 多个独立请求可使用 Promise.all() 并行执行，避免串行等待
- 用 try/catch 替代 .catch() 捕获错误，结构更清晰
示例：
async function fetchData() {
try {
const [res1, res2] = await Promise.all([
fetch('/api/user'),
fetch('/api/order')
]);
const user = await res1.json();
const order = await res2.json();
return { user, order };
} catch (error) {
console.error('加载失败:', error);
throw error;
}
}
避免隐藏的错误与内存泄漏
async/await 虽然简洁，但也容易忽略潜在问题。
- 忘记 await：调用 async 函数但没加 await，会返回一个未处理的 Promise，导致后续逻辑错乱
- 在循环中滥用 await：如果逐个 await 异步操作，会导致不必要的串行化，拖慢整体性能
- 未清理的异步任务：在组件卸载或用户跳转后，仍在执行的请求应被取消（如使用 AbortController）
特别是在前端框架中，记得在 useEffect 或生命周期结束时清理异步操作。
封装通用异步逻辑
将重复的异步模式抽象成可复用函数，比如带重试机制的请求封装：
async function fetchWithRetry(url, retries = 3) {for (let i = 0; i try {
const response = await fetch(url);
if (!response.ok) throw new Error();
return await response.json();
} catch (error) {
if (i === retries - 1) throw error;
await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
}
}
}
这样既提高了容错性，也增强了代码的复用性。
基本上就这些。用好 Promise 和 async/await，关键在于结构清晰、错误可控、资源不泄露。不复杂但容易忽略细节。
