JavaScript 异步编程（一）：认识异步编程

前言

“异步”的大规模流行是在 Web 2.0浪潮中，它伴随着 AJAX 席卷了 Web。前端充斥了各种 AJAX 和事件，这些都是典型的异步应用场景。现在的 Web 应用已经不再是单台服务器就能胜任的时代了，在跨网络的架构下，异步已经是必不可少的标准配备了。

在浏览器中 JS 在单线程上执行，而它还与 UI 渲染共用一个线程。这意味着 JS 在执行的时候，UI 渲染和响应是处于停滞状态的。如果网页临时需要获取一个网络资源，通过同步的方式获取，JS 需要等待资源完成从服务器端获取后才能继续执行，这期间 UI 将停顿，不响应用户的交互行为。而采用异步请求，在请求资源期间，JS 和 UI 的执行都不会处于等待状态，可以继续响应用户的交互行为，给用户一个鲜活的页面。

何为异步

任务队列

对于长时间响应的任务，可以把它们放进另一个队列中，不影响其他任务的执行，这个队列就是任务队列。

存在于任务队列中的任务，又叫作异步任务。异步任务区别于同步任务，同步任务是在主线程中执行的，它通常来说不会消耗太多的时间去执行，所以放在主线程中非常合适。

事件循环

任务队列中的任务（异步任务）需要使用事件循环机制来执行。在进程启动时，就会有一个类似于 while 循环，没执行一次循环体的过程我们称为 Tick。每个 Tick 的过程就是查看是否有事件待处理，如果有，就取出时间及其相关的回调函数。如果存在关联的回调函数，就执行它们。然后进入下个循环，如果不再有事件处理，就退出进程。

宏任务和微任务

任务队列中的任务可以再细分为宏任务（Macrotask）和微任务（Microtask）。微任务的执行优先级比宏任务的优先级高。

Promise 是微任务，它优先于 setTimeout 宏任务。主线程先输出 “main task!!!”，然后执行微任务，控制台输出 “microtask!!!”，随后输出宏任务 “macrotask!!!”。

回调函数

向服务器请求数据也是异步事件，若我们要获取这个异步事件处理后的结果，需要使用回调函数来获取这个结果。通常，回调函数常常运用于异步事件中。

小明买茶

小明某一天在奶茶店购买一杯柠檬茶，小明心想，与其浪费时间等待，不如刷视频。

小明需要一直等待奶茶店将柠檬茶制作完成，然后将其递给他才算完成整个事件。在等待的过程中，他在刷视频。同一时间内，A 事件需要等待一段时间；B 事件在段时间内完成，这类情况就是异步任务。

在时序图中，我们能很清楚地知道这些事件在一个时间段内应该处于什么位置。小明等待奶茶不应该影响他刷视频，整个体验会非常地友好。至于买的奶茶质量好与不好，不是我们关注的重点。

实际运用

以“小明买茶”故事为例，我们抽取一个函数。第一个参数是异步事件的名称，第二个参数异步事件执行的时间，第三个参数是回调函数作为参数传递。

为什么函数可以作为值进行参数传递，详细请看[JS]函数作为值。

function doSomething(eventName, timeout, callback) {
    console.log(`'${eventName}'正在进行中...`)
    setTimeout(() => {
        callback(`'${eventName}'事件已完成`) // 执行回调函数，提供一点信息。
    }, timeout)
}

// 异步事件
doSomething('小明购买奶茶', 3000, (info) => {
    console.log(info)
    doSomething('小明和朋友聊天', 1000, (info) => {
        console.log(info)
    })
})

// 同步事件
console.log('与此同时小明正在刷视频！')

异步事件处理完后，将结果传递给回调函数，所以 doSomething 函数是可以接收到回调函数传递过来的包含了结果的参数 info。

但是，在源代码中，回调函数中可以内嵌多个异步事件，这样层层嵌套在代码层面上会出现“倒金字塔”现象，不利于程序员后期的维护，这种现象叫作回调地狱。

回调地狱

在“小明买茶”的案例中，回调内部再嵌套回调，其代码形状上看着像 180° 旋转之后的金字塔，这种层层嵌套就是回调地狱。

但是Promise可以解决回调地狱的问题。Promise 是一个对象，用于表示一个异步操作的最终完成（或失败）及其结果值。

function doSomething(eventName, timeout) {
    console.log(`奶茶店接到'${eventName}'的订单，正在制作奶茶中...`)
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(`'${eventName}'事件已完成`)
        }, timeout)
    })
}

// 异步任务1
let promise01 = doSomething('小明购买奶茶', 3000).then((info) => {
    console.log(info)
})

// 异步任务2
let promise02 = doSomething('小明和朋友聊天', 1000).then((info) => {
    console.log(info)
})

// 同步任务
console.log('与此同时小明正在刷视频！')

使用 Promise 之后，解决了多层回调函数调用导致的“倒金字塔”现象。让我们看看实现效果：