JavaScript异步指耗时操作在后台运行,主线程继续执行,避免页面卡死;依靠事件循环和任务队列实现,含microtask(如Promise)与macrotask(如setTimeout);回调函数是基础方式,易致回调地狱,现多用Promise链式调用和async/await语法提升可读性与错误处理能力。

JavaScript 的异步,指的是代码不按书写顺序逐行阻塞执行,而是让某些耗时操作(比如网络请求、定时器、文件读取)在后台运行,同时主线程继续执行后续代码;等这些操作完成后再通知 JS 去处理结果。这避免了页面“卡死”,是前端响应流畅的关键。
异步怎么发生的?靠事件循环和任务队列
JS 是单线程的,但浏览器或 Node.js 提供了 Web API(如 setTimeout、fetch、addEventListener)来处理耗时任务。它们不在 JS 主线程里执行,而是在外部环境完成。完成后,会把对应的回调函数推入任务队列(microtask 或 macrotask),等调用栈空了,事件循环再把它拉进来执行。
- microtask(高优先级):Promise 回调、
queueMicrotask - macrotask(低优先级):
setTimeout、setInterval、I/O、UI 渲染
回调函数是最早的异步处理方式
回调函数就是你传给异步操作的一个函数,它会在操作完成(成功或失败)后被调用。比如:
setTimeout(() => {
console.log('2秒后执行');
}, 2000);
fetch('/api/data')
.then(data => console.log(data))
.catch(err => console.error(err));
上面的箭头函数和 .then 里的函数都是回调。但传统回调容易嵌套过深,形成“回调地狱”:
立即学习“Java免费学习笔记(深入)”;
getData((err, a) => {
if (err) throw err;
getMoreData(a, (err, b) => {
if (err) throw err;
saveData(b, (err, c) => {
if (err) throw err;
console.log('完成');
});
});
});
怎么更好地处理回调?升级到 Promise 和 async/await
回调本身没问题,问题在于手动管理错误和流程。现代写法更清晰可靠:
- 用
Promise封装回调:统一用.then()处理成功,.catch()处理失败,支持链式调用 - 用
async/await让异步代码看起来像同步:函数加async,等待操作前加await,错误用try/catch捕获
例如:
async function loadData() {
try {
const res = await fetch('/api/user');
const user = await res.json();
console.log(user);
} catch (err) {
console.error('加载失败:', err);
}
}
回调不是过时,而是要理解它的位置
很多底层 API(如 fs.readFile、canvas.toBlob、第三方库的钩子)仍以回调形式提供。你可以选择:
- 直接用回调(适合简单场景)
- 用
Promise包一层转成 Promise(推荐) - Node.js 14+ 可用
util.promisify快速转换
比如把 fs.readFile 改造成 Promise:
const { readFile } = require('fs').promises;
// 或者
const { promisify } = require('util');
const readFile = promisify(require('fs').readFile);
不复杂但容易忽略:回调函数本身不会自动变成异步,它只是被异步操作“将来调用”的一个普通函数;真正决定异步行为的是调用它的那个 API,不是回调长什么样。











