javaScript异步编程源于单线程特性,为避免阻塞主线程而采用回调、promise、async/await演进方案:回调易致地狱嵌套,Promise实现链式调用与统一错误处理,async/await则以同步语法提升可读性与控制流自然性。

javascript异步编程,本质是让耗时操作(比如网络请求、文件读取、定时器)不卡住主线程,程序可以继续执行其他代码,等结果就绪后再处理它。这源于js单线程特性——同一时间只能干一件事,不能像多线程语言那样“并行”,所以必须靠异步机制避免页面卡死。
为什么必须用异步?
同步执行会阻塞整个线程。例如一个3秒的模拟请求:
while (date.now() – start 这段代码运行时,按钮点不了、动画停了、页面完全无响应。异步就是把这类任务“挂起”,先跑别的,回头再处理结果。
回调函数是起点,但容易掉进回调地狱
最原始的异步写法是传一个函数进去,等操作完成再调用它:
立即学习“Java免费学习笔记(深入)”;
setTimeout(() => console.log(‘done’), 1000);
问题出在多个依赖场景里:请求A的结果要传给请求B,B的结果再传给C……嵌套一层套一层:
ajax(‘/user’, (user) => {
ajax(`/posts?uid=${user.id}`, (posts) => {
ajax(`/comments?pid=${posts[0].id}`, (comments) => {
console.log(comments);
});
});
});
这种结构难读、难调试、难加错误处理,也几乎没法中途取消或复用。
Promise 是解决回调地狱的第一步
Promise 把嵌套变成链式调用,每个 .then() 返回一个新的 Promise,自然形成扁平结构:
- 用 new Promise((resolve, reject) => {…}) 封装异步操作
- 成功走 .then(),失败统一走 .catch()
- 中间任意环节出错,都会被后续的 .catch() 捕获,不用层层写 if(err)
上面的例子可改写为:
getUser().then(user => getPosts(user.id))
.then(posts => getComments(posts[0].id))
.then(comments => console.log(comments))
.catch(err => console.Error(‘出错了:’, err));
async/await 让异步代码看起来像同步
这是目前最推荐的写法,基于 Promise,但语法更直观:
- 函数前加 async,内部可用 await 等待 Promise 结果
- 错误可用标准 try/catch 捕获,和同步代码一致
- 支持 await Promise.all([]) 并发多个请求,比串行快得多
示例:
async function loadAll() {
try {
const user = await getUser();
const posts = await getPosts(user.id);
const comments = await getComments(posts[0].id);
console.log(comments);
} catch (err) {
console.error(err);
}
}
基本上就这些。从回调 → Promise → async/await,不是替代关系,而是演进关系:Promise 解决嵌套和错误统一,async/await 解决可读性和控制流自然性。选哪个,看项目规范和团队习惯,但新项目建议直接上 async/await。