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.......
11111
after 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 1
in delay...
before async.....
(1s之后)
will resolve
after async.....2
test sign
use generator 2
in 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 1
in delay...

will resolve
test sign
use generator 2
in delay...

will resolve
use generator 3
in delay...

will resolve
use generator 4
in 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 1
in delay...

will resolve
use generator 2
in delay...

will resolve
use generator 3
in delay...

will resolve
use generator 4
in delay...

will resolve
after 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