JavaScript同步与异步编程从小白到彻底理解

更新时间：2026年06月12日 09:34:03 作者：无糖可可果

异步编程是每个使用JavaScript编程的人都会遇到的问题,无论是前端的ajax请求,或是node的各种异步API,这篇文章主要介绍了JavaScript同步与异步编程从小白到彻底理解的相关资料,需要的朋友可以参考下

一、先看一个现象：代码不是"从上到下"执行的？

// 1.js
console.log('start');

setTimeout(() => {
    console.log('222');
}, 1000);

console.log('end');

// 输出顺序：
// start
// end
// 222 （1秒后）

如果你刚学 JS，可能会困惑：明明 console.log('222') 写在 console.log('end') 前面，为什么 end 先打印出来了？

这就是 同步代码 与 异步代码 的区别。

二、为什么 JavaScript 是单线程的？

// 2.js
let a = 1;
let b = 2;
let c = 3;
console.log(a + b + c);

JS 被设计为 单线程 语言。这意味着同一时间只能做一件事。

对比一下：

C++ / Java 等系统级语言：支持多进程多线程架构，可以同时开 3 个线程分别声明 a、b、c，并发执行，效率高，但编写复杂、容易出死锁等问题。
JavaScript：故意设计得简单——只有一个主线程。好处是：不用考虑锁、竞争条件，写起来心智负担低。

但问题来了：单线程下，如果一个任务耗时很长（比如网络请求要等 2 秒），整个页面不就"卡死"了吗？

JavaScript 的解决方案是：异步编程 + Event Loop。

三、JS 执行机制：Event Loop（事件循环）

用比喻来理解：

角色	类比	说明
进程 (Process)	董事长	负责分配资源，拥有 PID
主线程 (Thread)	经理	JS 只有一个主线程，执行代码
Event Loop	任务队列	暂存异步任务的"候车室"

整个执行流程是这样的：

1. 主线程启动
2. 同步代码全部快速执行完毕
        ↓
3. 遇到异步任务（定时器、fetch请求、事件监听...）
   → 放入 Event Loop 队列，跳过，继续往下执行
        ↓
4. 同步代码全部跑完后
   → 回到 Event Loop 中，按顺序取出异步任务执行

用图片化的方式来理解就是：

│ 同步代码                  │  异步代码 (Event Loop)     │
│ console.log('start') ────→│                           │
│ console.log('end')   ────→│                           │
│                           │  setTimeout 回调 等待中... │
│ 同步代码执行完毕 ────────→│  执行 setTimeout 回调      │
│                           │  console.log('222')        │

这就是为什么 1.js 中 end 在 222 之前输出——setTimeout 被丢进了 Event Loop，等同步代码跑完才轮到它。

四、Promise：异步任务控制的最佳机制

4.1 什么是 Promise？

Promise 是 ES6 引入的，专门用来优雅地控制异步任务。

// 3.js
const p = new Promise((resolve, reject) => {
    console.log('许诺言');        // ① 立即执行
    setTimeout(() => {
        // resolve(666);          // ② 成功时调用
        reject("网络错误");       // ② 失败时调用
    }, 2000);
});

p.then((data) => {                // ③ resolve 触发
    console.log(data);
})
.catch((err) => {                 // ③ reject 触发
    console.log(err);
})
.finally(() => {                  // ④ 无论如何都会执行
    console.log('finally');
});

理解 Promise 的三个关键点：

要点	说明
executor 立即执行	`new Promise(fn)` 中的 `fn` 是同步执行的，它是耗时任务的"容器"
resolve / reject	两个函数能力，由你在异步任务完成时手动调用
then / catch / finally	链式回调，分别对应成功、失败、最终

4.2 链式调用的美妙之处

Promise 最大的优点是解决了回调地狱。对比一下：

// ❌ 回调地狱
getUser(userId, (user) => {
    getOrders(user.id, (orders) => {
        getDetails(orders[0].id, (detail) => {
            // ...
        });
    });
});

// ✅ Promise 链式调用
getUser(userId)
    .then(user => getOrders(user.id))
    .then(orders => getDetails(orders[0].id))
    .then(detail => console.log(detail))
    .catch(err => console.error(err));

五、实战：fetch 就是 Promise 的应用

<!-- 4.html -->
<script>
    console.log('start');
    fetch('https://www.baidu.com', {
        method: 'post'
    }).then((res) => {
        console.log(res);
    }).catch((err) => {
        console.log(err);
    });
    console.log('end');

    // 输出：start → end → (请求完成后打印 res)
</script>

fetch 底层就是一个 Promise。所以它天然支持 .then() / .catch() 链式调用。

六、自实现 sleep 函数

JS 没有内置的 sleep() 功能，但我们可以用 Promise 自己封装一个：

<!-- 5.html -->
<script>
    function sleep(t) {
        const p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve();
            }, t);
        });
        return p;
    }

    sleep(2000).then(() => {
        console.log('2s后再做');
    });
</script>

现代写法可以用 async/await 让它更优雅：

function sleep(t) {
    return new Promise(resolve => setTimeout(resolve, t));
}

async function demo() {
    console.log('开始');
    await sleep(2000);
    console.log('2s后执行');
}

七、总结：一张图搞定同步异步

┌─────────────────────────────────────────────────────────┐
│                    JavaScript 执行流程                     │
├───────────────┬─────────────────────────────────────────┤
│   同步任务      │              异步任务                    │
│  (主线程直接执行) │         (Event Loop 管理)              │
├───────────────┼─────────────────────────────────────────┤
│ • 变量声明      │  • setTimeout / setInterval             │
│ • 循环/判断     │  • fetch / AJAX 请求                     │
│ • console.log  │  • 事件监听 (click, scroll...)           │
│ • Promise      │  • Promise.then/catch 的回调             │
│   executor     │                                          │
├───────────────┴─────────────────────────────────────────┤
│  执行顺序：                                               │
│  1. 清空同步任务                                           │
│  2. 从 Event Loop 取微任务 (Promise.then/catch) 执行        │
│  3. 从 Event Loop 取宏任务 (setTimeout/fetch回调) 执行      │
└─────────────────────────────────────────────────────────┘

核心结论就三句话：

JS 是单线程的——简单安全，但要靠异步来避免阻塞。
Event Loop 是调度中心——同步代码先跑完，异步任务排队等。
Promise 是控制异步的王牌——链式调用，告别回调地狱，搭配 async/await 更香。

希望这篇文章能帮你建立起 JS 同步异步的完整认知框架！

到此这篇关于JavaScript同步与异步编程从小白到彻底理解的文章就介绍到这了,更多相关JS同步与异步编程内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

浅谈webpack-dev-server的配置和使用
本篇文章主要介绍了浅谈webpack-dev-server的配置和使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
php利用curl获取远程图片实现方法
这篇文章主要介绍了php利用curl获取远程图片实现方法，curl要求php环境支持，需要的朋友可以参考下
2015-10-10
JS关于for循环中使用setTimeout的四种解决方案
这篇文章主要介绍了JS关于for循环中使用setTimeout的四种解决方案，想深入了解JS的同学，一定要看下
2021-05-05
微信小程序map地图使用方法详解
这篇文章主要为大家详细介绍了微信小程序map地图使用的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
uniapp微信小程序实现一个页面多个倒计时
这篇文章主要为大家详细介绍了uniapp微信小程序实现一个页面多个倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
JS获取数组最大值、最小值及长度的方法
这篇文章主要介绍了JS获取数组最大值、最小值及长度的方法,涉及JavaScript遍历数组及length属性的相关使用技巧,非常简洁实用,需要的朋友可以参考下
2015-11-11
JavaScript中判断整数的多种方法总结
这篇文章主要介绍了JavaScript中判断整数的多种方法总结,本文总结了5种判断整数的方法,如取余运算符判断、Math.round、Math.ceil、Math.floor判断等,需要的朋友可以参考下
2014-11-11
zTree插件下拉树使用入门教程
这篇文章主要为大家详细介绍了zTree插件下拉树使用入门教程，感兴趣的小伙伴们可以参考一下
2016-04-04
Bootstrap前端开发案例一
Bootstrap前端开发案例一，这篇文章能够帮助大家更还好的进行前端开发Bootstrap，相信大家会爱上Bootstrap
2016-06-06
微信小程序复选框实现多选一功能过程解析
这篇文章主要介绍了微信小程序复选框实现多选一功能过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-02-02