大前端进阶-js异步编程

学不动了怎么办？换个姿势继续学。

JS引擎

js引擎执行过程分为三个阶段：

• 解释阶段

js代码加载完毕后进入此阶段，此阶段完成由字符串到机器码的转变过程。

• 预处理（编译）阶段与执行阶段

由于js是解释性语言，所以会一边编译一边执行。创建变量对象发生在预编译阶段（编译阶段生成执行上下文，执行上下文包含变量，作用域链和this），变量赋值发生在执行阶段。

同步VS异步

浏览器内核是多线程的，和js执行相关的线程包含：

1. js引擎主线程，负责解释和执行js代码。
2. ajax请求线程。
3. DOM处理线程。
4. 定时任务线程。

所有同步任务都是在js引擎主线程上按照顺序一次执行，形成一个执行栈，任务的执行也是任务在执行栈上的不断入栈和出栈。除了执行栈，事件触发线程管理一个任务队列，异步任务有了结果，会向任务队列放入回调。一旦所有同步任务执行完毕之后（js引擎空闲），会读取任务队列，将任务放入执行栈并执行。

**事件循环**（Event Loop）
指的是脚本运行时，先依次运行执行栈，然后从任务队列中取出事件执行来运行任务队列中的任务，这个过程是不断重复的。

异步编程

回调函数

回调函数是js异步编程的常用方式，但是回调函数容易层层嵌套形成回调地狱。

const getData = (data, callback) => {
    setTimeout(() => {
        callback(data + 1)
    }, 1000)
}

getData(1, function (v1) {
    getData(v1, function (v2) {
        getData(v2)
    })
})

层层嵌套的代码，不仅影响代码逻辑，而且可读性非常差，可以用Promise 对象、Generator 函数、async 函数替代，使得回调扁平化。

Promise

Promise对象提供then方法，then方法可以链式调用，链式调用时then方法依次执行。

const getData = function (data) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(data + 1)
        }, 1000)
    })
}

getData(1)
    .then(v1 => {
        return getData(v1)
    })
    .then(v2 => {
        return getData(v2)
    })

Promise对象不仅能解决回调地狱问题，同时还提供了静态的all和race方法。all方法接收一个数组，当数组中存在异步调用的时候，只有异步方法全部执行完成之后，then方法才执行。race方法同样接受一个数组，与all不同的是，参数数组中的多个异步调用，如果其中一个完成或者失败，那么then方法就会执行，可以用race方法实现ajax超时判断。

const getData = function (data) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(data + 1)
        }, 1000)
    })
}

function timeout(duration) {
    return Promise.race([
        getData(1),
        new Promise((resolve, reject) => {
            setTimeout(() => {
                reject(new Error('调用超时'))
            }, duration)
        })
    ])
}

timeout(500).then(value => {
    console.log(value)
}).catch(err => {
    console.log(err.message)
})

由于设置的超时时间是500毫秒，此时getData异步函数尚未执行完成，因此race方法会捕获到超时错误。

Generator

Generator生成器，可以利用*和yield关键字解决异步嵌套的回调地狱问题。

const getData = function (data) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(data + 1)
        }, 1000)
    })
}

function* gen() {
    let v1 = yield getData(1)
    console.log(v1)
    // yield会使函数暂停执行，当调用next方法时会继续执行，同时next方法传入的参数会作为yield的返回值
    let v2 = yield getData(v1)
    console.log(v2)
}

function co(generator) {
    let g = generator()

    function handleResult(result) {
        if (result.done) return
        else {
            result.value.then((value) => {
                handleResult(g.next(value))
            }, err => {
                console.log(err)
            })
        }
    }

    handleResult(g.next())
}

co(gen)

async

通常async和await一起使用，是一种语法糖，可以理解为通过async和await关键字可以更方便的实现上节中的generator。

const getData = function (data) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(data + 1)
        }, 1000)
    })
}

async function main() {
    let v1 = await getData(1)
    console.log(v1)
    // yield会使函数暂停执行，当调用next方法时会继续执行，同时next方法传入的参数会作为yield的返回值
    let v2 = await getData(v1)
    console.log(v2)
}

main()

微任务vs宏任务

如果执行下面的代码：

setTimeout(() => {
    console.log('timeout')
}, 0)
new Promise(resolve => {
    resolve('promise')
}).then(v => {
    console.log(v)
})

会发现，同样是异步操作，Promise的回调函数会早于setTimeout的回调函数，这就涉及到微任务(Promise等)和宏任务(setTimeout等)。
宏任务和微任务均为异步任务，只是执行顺序不同，通常情况下，会优先执行微任务，当微任务执行完毕之后，再执行宏任务。
盗用网上的执行逻辑图：

常见的宏任务有：setTimeout（同等延迟时间下，setTimeOut的优先级高于setImmediate），setInterval, setImmediate, I/O, UI rendering。
常见的微任务有：Promise，process.nextTick(在node环境中nextTick优先级高于promise)。

参考：
js运行机制及异步编程（一）
js运行机制及异步编程（二）