JavaScript通过异步编程处理耗时操作，从回调函数到Promise、async/await，再到AbortController实现请求取消，逐步提升代码可读性与控制力。
JavaScript 是单线程语言，但通过异步编程模型，能够高效处理耗时操作，比如网络请求、文件读取或定时任务。随着语言的发展，异步编程方式也在不断演进。从回调函数到 Promise，再到 async/await 和现代的可取消异步操作，掌握这些技术是现代前端和 Node.js 开发的核心能力。
回调函数：最初的异步解决方案
早期 JavaScript 使用回调函数处理异步任务。例如，在 setTimeout 或事件监听中，传入一个函数作为“后续操作”。
示例：
function fetchData(callback) {setTimeout(() => {
callback('数据已获取');
}, 1000);
}
fetchData((data) => {
console.log(data); // 1秒后输出
});
问题在于：多个嵌套回调会形成“回调地狱”，代码难以维护和调试。
立即学习“Java免费学习笔记（深入）”；
Promise：更清晰的异步流程控制
Promise 是 ES6 引入的标准对象，代表一个异步操作的最终完成或失败。它有三种状态：pending（进行中）、fulfilled（成功）、rejected（失败）。
使用 .then() 处理成功，.catch() 处理失败，链式调用改善了可读性。
示例：
function fetchUserData() {return new Promise((resolve, reject) => {
setTimeout(() => {
const success = true;
if (success) {
resolve({ id: 1, name: 'Alice' });
} else {
reject(new Error('获取失败'));
}
}, 800);
});
}
fetchUserData()
.then(user => console.log(user))
.catch(err => console.error(err));
Promise 还支持 Promise.all() 并行执行多个异步任务，全部成功才 resolve；Promise.race() 返回第一个完成的结果。
async/await：同步语法写异步代码
async/await 是基于 Promise 的语法糖，让异步代码看起来像同步代码，极大提升可读性和错误处理能力。
在函数前加 async，内部可用 await 等待 Promise 完成。
示例：
async function getUserProfile() {try {
const user = await fetchUserData();
console.log('用户:', user);
return user;
} catch (error) {
console.error('出错:', error.message);
}
}
getUserProfile();
注意：await 只能在 async 函数内使用。顶层 await 在模块中也可直接使用。
AbortController：取消异步操作
某些场景下，需要取消正在进行的请求，比如用户切换页面时停止旧请求。Fetch API 支持通过 AbortController 实现取消。
示例：
const controller = new AbortController();const signal = controller.signal;
fetch('/api/data', { signal })
.then(res => res.json())
.then(data => console.log(data));
// 需要时取消请求
// controller.abort();
这在 React、Vue 等框架中常用于组件卸载时清理未完成请求。
基本上就这些。现代 JavaScript 的异步编程已经非常成熟，合理使用 Promise 和 async/await 能写出清晰、健壮的异步逻辑。配合 AbortController 和 try/catch，还能实现更精细的控制和错误处理。不复杂但容易忽略细节，比如未捕获的 Promise 错误可能导致静默失败，务必加上 .catch 或用 try/catch 包裹 await。
