⚡ 同步 vs 异步

一看就懂的可视化演示

🍜 餐厅点餐
📥 文件下载
🌐 API请求

🔴 同步模式

一个任务完成后才能开始下一个

主线程
任务1
任务2
任务3
0s3s6s9s
-
总耗时
-
阻塞时间

🟢 异步模式

多个任务可以同时进行

任务1
执行中
任务2
执行中
任务3
执行中
0s3s6s9s
-
总耗时
-
节省时间

💡 一句话理解

同步：做完一件事才能做下一件，中间只能干等着。就像排队买奶茶，前面的人不走你就得等。

异步：发起一个任务后不用等它完成，可以先去做别的事。就像点了外卖继续工作，外卖到了再去拿。

🔧 代码对比

🔴 同步代码
// 同步：按顺序执行，会阻塞
const user = getUser('123'); // 等3秒
const orders = getOrders(user.id); // 再等3秒
const products = getProducts(); // 再等3秒
// 总共需要 9 秒
🟢 异步代码
// 异步：同时发起，不阻塞
const [user, orders, products] = await Promise.all([
    getUser('123'),
    getOrders('123'),
    getProducts()
]);
// 总共只需要 3 秒！

🎯 生活中的例子

🔴 同步场景

• 排队取号等叫号
• 打电话等对方接听
• ATM机前排队取钱
• 等红绿灯过马路

🟢 异步场景

• 点外卖后继续工作
• 洗衣机洗衣服时看电视
• 发微信后不用等回复
• 预约挂号后先去办别的事

🎓 什么时候用哪个？

用同步：当后续操作依赖前一步的结果时。比如必须先登录才能获取用户信息。

用异步：当多个操作相互独立、可以并行时。比如同时加载页面的多个模块。

记住：异步不是万能的，但在 I/O 密集型操作（网络请求、文件读写、数据库查询）中，异步能显著提升性能和用户体验。