JavaScript异步操作汇总

概述

Javascript语言的执行环境是”单线程”(single thread)。所以异步编程对 JavaScript 语言太重要。如果没有异步编程，根本没法用，非卡死不可。本文介绍js中三种不同的异步方式，Promise, Generator, Async。通过对比三种异步方式的特点，让大家更加优雅地使用异步操作。

在ES6之前是怎么写异步操作的：
我们用setTimeOut来做模拟异步

function mockAsync(cb, time) {    console.log("before aync.......");    setTimeout(()=>{        console.log("after aync.......")        cb();    }, time)}

上面是只有一个异步，如果我们想要串行执行一些事情，那么代码就要这么写

mockAsync(()=>{    console.log("mock async 1")    mockAsync(()=>{        console.log("mock async 2")        mockAsync(()=>{            console.log("mock async 3")            mockAsync(()=>{                console.log("mock async 4")            }, 1000)        }, 1000)    }, 1000)}, 1000)

这样在回调里执行回调，就是传说中的回调地狱
通过回调实现异步，优点是简单、容易理解和部署，缺点是不利于代码的阅读和维护，各个部分之间高度耦合（Coupling），使得程序结构混乱、流程难以追踪（尤其是回调函数嵌套的情况），而且每个任务只能指定一个回调函数。

Promise

promise本身并没有解决回调地狱的问题，它的本质仍然是传递回调，例如上面的例子，用promise写是这样的

function usePromise(time){    console.log("before async.......");    return new Promise((resolve, reject)=>{        console.log("11111");        setTimeout(()=>{            console.log("after async.......")            resolve();        }, time)    });}usePromise(1000).then(()=>{    console.log("use promise");})

输出：

before async.......11111after async.......use promise

我们继续实现串行异步，代码就会是这样

usePromise(1000).then(()=>{    console.log("use promise 1");    usePromise(1000).then(()=>{        console.log("use promise 2");        usePromise(1000).then(()=>{            console.log("use promise 3");            usePromise(1000).then(()=>{                console.log("use promise 4");            })        })    })})

但是promise并没有这么笨，所以它做了一些改进,这样写会好看很多

usePromise(1000).then(()=>{    console.log("use promise 1");    return usePromise(1000);}).then(()=>{    console.log("use promise 2");    return usePromise(1000);}).then(()=>{    console.log("use promise 3");    return usePromise(1000);}).then(()=>{    console.log("use promise 4");})

这是基于promise的一项特性，那就是then和catch方法都是返回了一个新的promise，我们暂时称他为p1， p1这个promise会在什么时候改变状态呢？如果在then或者catch方法return了一个普通对象（没有return语句相当于return undefined），那么p1的状态会马上改变。如果then或者catch方法return了一个promise p2，那么只有当p2的状态改变了，p1的状态才会改变。

所以这个代码就好理解了，这就是利用在then函数里return一个新的promise，之后的then就是依次处理前一个promise的。

关于then和catch的细节，以及promise.all() promise.race, promise.resolve, promise.reject可以参考阮一峰的教程。

Generator

Promise并没有改变异步的实现方式，他还是通过传递回调实现的。但Generator改变了异步的实现方式，generator可以将异步的代码以同步的方式来实现，很好地实现了异步操作的流程控制。

function* useGenerator(){    yield console.log("use generator 1");    yield console.log("use generator 2");    yield console.log("use generator 3");    yield console.log("use generator 4");}

普通的函数想要实现异步，必须通过回调，因为普通的函数会一直执行到return语句，然后整个函数结束。

generator函数只有调用next语句才会执行，每次执行到yield语句为止，然后在需要的时候再次调用next语句，从上次结束的位置继续执行。

上面代码中，操作都是立即执行，所以虽然是异步，但看起来不像，所以我们在它的基础上写一个看起来更像异步的，仍然用setTimeout来模拟异步

function delay(time) {    console.log("in delay...");    return new Promise((resolve)=>{        setTimeout(()=>{            console.log("will resolve");            resolve("aaa");        }, time);    });}function* useGenerator1(){    console.log("use generator 1")    let a = yield delay(1000);    console.log("test sign");    console.log("use generator 2")    let b = yield delay(1000);    console.log("use generator 3")    let c = yield delay(1000);    console.log("use generator 4")    let d = yield delay(1000);}let iter = useGenerator1();let result = iter.next();console.log("before async.....");result.value.then(()=>{    console.log("after async.....2");    iter.next();})

打印结果

use generator 1in delay...before async.....(1s之后)will resolveafter async.....2test signuse generator 2in delay...(1s之后)will resolve

我们通过yield返回一个promise，当这个promise改变状态后，执行这个generator函数的next方法。我们可以把所有的异步操作都想象成是一个promise，显然promise改变状态前和改变状态后执行的代码，在generator函数里是连续写着的，就像同步代码一样，只要在每次需要中断的时候使用yield语句就可以了。

如果想要generator函数自动执行完，需要实现thunk函数，例如如下代码，这个属于稍微高端的玩法，暂时可以先忽略。

function thunk(iter) {    let result = iter.next();    if(result.done) {        return;    }    result.value.then(()=>{        thunk(iter);    });}let iter = useGenerator1();thunk(iter);

打印结果

use generator 1in delay...will resolvetest signuse generator 2in delay...will resolveuse generator 3in delay...will resolveuse generator 4in delay...will resolve

async

async和await是ES2017的内容，他们可以看做完全是generator函数的语法糖，async相当于*, await相当于yield。不同的是aync函数会自动执行，直到return（前面说过，没有return语句等于return undefined）。也就是实现了我们上面写的thunk。

async function useAsync(){    console.log("use generator 1")    await delay(1000).then(()=>{    });    console.log("use generator 2")    await delay(1000);    console.log("use generator 3")    await delay(1000);    console.log("use generator 4")    await delay(1000);}console.log("before async.....");useAsync().then((result)=>{    console.log("after async....."+ result);}).catch();

打印信息

before async.....use generator 1in delay...will resolveuse generator 2in delay...will resolveuse generator 3in delay...will resolveuse generator 4in delay...will resolveafter async.....undefined

async函数返回的是一个promise，它的then函数回调参数就是async函数return的值，如果代码发生异常或者await的promise进入reject状态，则返回的promise也立即进入reject状态。

正常情况下await后面是一个promise对象，如果不是，则会转为一个立即resolve的promise对象。

多个await的promise，相当于promise.all()，也就是需要所有的promise都resolve之后，整体才进入resolve状态，任何一个进入reject，则立即进入reject。注意的是此时async函数后面的代码就没有机会执行了。

特别感谢同事@yangguang