js中什么是异步、如何巧妙利用异步~搞懂异步这一篇文章就够啦！！

异步

为什么会出现异步这种难理解的东西呢 ***：

简单来说，异步让代码不必一步一步傻等，可以一边做事一边干别的。就像你煮饭时，电饭煲在干活，但你并不需要一直盯着它，可以趁这个时间去切菜、炒菜，等饭煮好后，自动有信号通知你“饭熟了，来吃吧！”。这下明白了吧！！

是不是看完之后豁然开朗！

同步与异步的区别

同步

闲话少说直接上“码”

console.log("我开始煮饭了...");
for (let i = 0; i < 1000000000; i++) { } // 模拟煮饭的时间
console.log("饭煮好了，来吃吧！");

这个同步的代码块，意思是“我要一直等饭煮好，别的事不干！”。所以你的页面可能会卡住，什么事情也不发生。就像在现实生活中，你呆呆地站在电饭煲前，一动不动等着饭熟~“此行为像极了隔壁村的二傻子！”。

异步

异步呢？它就聪明多了，可以“煮饭”的同时做别的事！继续撸码：

console.log("我开始煮饭了...");
setTimeout(() => {
    console.log("饭煮好了，来吃吧！");
}, 2000);  // 2秒模拟煮饭时间

console.log("我去切菜了...");

这段代码中，我们使用了 setTimeout 模拟异步行为。你可以看到，煮饭的过程中，程序可以去切菜，等饭熟了（2秒后），再通知你来吃饭。这就是异步的威力！

异步的几种方式

1. 回调函数（Callback）

最早，异步的实现方式就是使用回调函数。就像你告诉你的好基友：“你先去看电影，等我煮完饭再叫你！（基友：义父，饭好了没！）”

function makeRice(callback) {
    setTimeout(() => {
        console.log("饭煮好了！");
        callback();
    }, 2000);
}

function eatRice() {
    console.log("开始吃饭！");
}

console.log("我开始煮饭了...");
makeRice(eatRice); // 煮完饭后调用吃饭的函数
console.log("我去切菜了...");

但问题来了，如果你有多个任务依赖回调函数，就像“煮饭 -> 切菜 -> 炒菜 -> 吃饭”，这会造成回调地狱，代码越来越难看，也难维护：

makeRice(() => {
    cutVegetables(() => {
        fryVegetables(() => {
            eatRice();
        });
    });
});

这就像让你的小伙伴们一层一层站成金字塔，太 t m 麻烦了！

2. Promise

为了让异步代码更优雅，Promise 横空出世。它更像是一张合约：“我答应你，饭煮好了一定通知你。”

function makeRice() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("饭煮好了！");
            resolve();
        }, 2000);
    });
}

makeRice().then(() => {
    console.log("开始吃饭！");
});
console.log("我去切菜了...");

Promise 让你的代码变得更清晰，摆脱了回调地狱的屌丝行为狗头。不过，then 链式调用虽然好，但一串长长的 then 也有点别扭。

3. async/await

如果你喜欢写代码像写诗一样优雅（此刻的你犹如雷军附体，are you ok），那 async/await 就是你的菜了！它是基于 Promise 的语法糖，代码看起来就像是同步的，但实际上是异步的。就像你告诉朋友：“煮完饭后通知我，我就去吃饭。”

function makeRice() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("饭煮好了！");
            resolve();
        }, 2000);
    });
}

async function cookDinner() {
    console.log("我开始煮饭了...");
    await makeRice();  // 这里就像是“等饭煮好”
    console.log("开始吃饭！");
}

cookDinner();
console.log("我去切菜了...");

这段代码看起来完全是按顺序执行的，但实际上，它是异步的，煮饭的过程中，你还是可以去切菜！

异步的实际应用

1. AJAX请求：在前端开发中，你可以用异步发送请求去获取数据，不用等服务器返回后才继续操作。比如，登录页面输入用户名密码后，你可以继续输入验证码，后台去验证用户信息。

2. 定时任务：像倒计时、闹钟等都可以用 setTimeout 或 setInterval 来实现异步效果。

3. 文件处理：比如读取大文件时，可以使用异步让读取过程不会阻塞其他操作。

结论

异步的核心理念就是“别浪费时间，边干边等”，让代码更高效、灵活。异步就像一个大厨在厨房里忙活，你可以在等待的过程中处理其他任务，等大厨准备好菜品时，再叫你过来享用。

搞懂异步后，感觉是不是如沐春风？从此写代码也不再像死等着饭煮熟了！