前面说过，相比普通的回调函数，promise 可以通过链式调用解决回调嵌套过深的问题。使用promise去处理异步任务的串联执行，它的表现就是 一个then去处理一个异步调用。 最终整体形成一个任务链条，从而实现所有任务的串联执行。

但它任然会有大量的回调函数，虽然它们相互之间没有嵌套，但它还是没有达到传统同步代码的可读性。

Generator 

ES6提供的生成器函数已经学过了，现在看它一个例子：

javascript">function * foo(){
    try{
        console.log('start');
        const res1 = yield '111';
        console.log(res1)
    } catch(e){
        console.log(e)
    }    
}
const generator = foo();

const result = generator.next()
console.log(result);    //{value:'111',done:false}

generator.throw( new Error('Generator error') )

1. 首先 ，调用foo 生成器函数，并不会执行这个函数，而是得到一个generator生成器对象。  

2. 第一次去调用这个generator 对象的next方法，这个foo函数的函数体才会开始执行，一直执行到yield关键字所在的位置，把yield关键字后面的值返回出去，然后foo函数暂停执行。然后yield后面的值就会作为next方法返回对象（esult）的value值。

3. 调用生成器对象的 throw方法，这个方法也会让生成器函数继续执行。不过它的作用的是抛出一个异常，所以foo函数继续执行的时候就会去捕获这个异常。

 

使用Generator管理 异步流程

我们可以使用yield 可以暂停生成器函数的特点，使用生成器函数实现一个更优的异步编程体验。

先来一个简单的例子，看Generator 生成器函数是如何控时异步调用的：

javascript">function ajax(url){
    return new Promise(function(resolve,reject){
        // throw new Error("ewew")
        const xhr = new XMLHttpRequest();
        xhr.open("GET",url);
        xhr.responseType = "json",
        xhr.onload = function(){
            // AA()
            if(this.status == 200){
                resolve(this.response)
            }else{
                reject(this.response)
            }
        };
        xhr.send();
    })
};

function * main(){
    const urls =  yield ajax("../api/urls.json");
    console.log(urls);
};
const g = main();
const result = g.next();   
console.log(result)
result.value.then(function(data){
    g.next(data);
})

//1.  {value: Promise, done: false}
//2.  {users: "api/users.json", posts: "api/posts.json"}  

这里的ajax 函数就是上篇文章 所封装的一个ajax函数，返回一个promise对象，主要看下面的生成器函数main和它的调用。看一下它的执行过程：

1.首先调用一下main函数，得到一个生成器对象g。

2.调用生成器对象 g 的next()方法，main函数会执行到第一个yield 的位置，也就是执行ajax函数。

3.这里next方法返回对象result 的 value 就是yield返回的promise对象 。这里有打印操作查看后可以印证。

4.所以result.value 就是那个promise对象，接下来可以通过result.value.then()的方式指定这个promise的回调。

5.在promise的回调当中可以拿到这个promise的执行结果（也就是ajax请求到的json数据），在调用一次生成器对象g的next()方法把json数据传递进去。这样生成器函数main就可以继续执行，而且传进去的json数据就是当前yield的返回值。这样到urls变量就能拿到ajax请求的json数据，并且就能看到urls变量得到数据并且被打印出来。

这样对于main函数的内部，就彻底消除了promise的回调，有一种近乎于同步代码的体验。

接下来，我们可以在main函数内部继续添加  yield 操作。

javascript">function * main(){
    const urls1 =  yield ajax("../api/urls1.json");
    console.log(urls);

    const urls2=  yield ajax("../api/urls2.json");
    console.log(urls2);

    const urls3=  yield ajax("../api/urls3.json");
    console.log(urls3);
};
const g = main();
const result1 = g.next();   
result1.value.then(function(data){
    let result2 = g.next(data);
    if(result2.done) return;
    result2.value.then(function(data){
        let result3 = g.next(data);
        if(result2.done) return;
        result3.value.then(function(data){
            if(result2.done) return;
            let result4 = g.next(data);
            console.log(result4)
        })
    })
})

这样，result2 对象的value就是第2个yield 后面ajax函数返回的promise对象，result2.value继续可以执行then方法指定第二个promise的回调。在回调函数中拿到第二个ajax函数请求到的数据。

然后再次执行g.next(data)， 继续运行main函数，把拿到的数据传回main函数 并且赋值给urls2.

接下来 依次类推。。。如果我们在main函数当中多次使用yield去返回promise对象，而且每次返回的都是promise对象，那这里就可以不断的在then当中调用next(),直到next函数返回对象的done属性为true；，就是说main函数完全被执行完了后再停止。

所以每次在调用main函数的next方法时，都要先判断done属性是不是为true；（为true就表示 生成器函数已经执行结束了，没必要往下执行了）。

 

很明显这里我们可以使用递归去不断迭代，直到done属性最终返回true，生成器函数完全结束，就可以结束递归。

我们接下来就使用递归的方式实现 这个生成器函数的 执行器：

javascript">function * main(){
    const urls1 =  yield ajax("../api/urls1.json");
    console.log(urls);

    const urls2=  yield ajax("../api/urls2.json");
    console.log(urls2);

    const urls3=  yield ajax("../api/urls3.json");
    console.log(urls3);
};
const g = main();
function handleResult(result){
    if( result.done ) return;
    result.value.then(function(data){
        handleResult(g.next(data));
    })
};

handleResult(g.next());

其实还需要考虑的一点是 当执行过程中某个promise失败后的处理逻辑，因为之前我们没有考虑过一旦任何一个promise 失败了，就会出现未捕获的异常。

处理起来也比较简单，直接在promise的then方法中添加onRejected回调函数，在回调中使用生成器对象的throw方法抛出异常然后在main函数中使用try catch 方式去捕获它。

javascript">function * main(){
    try{
        const urls1 =  yield ajax("../api/urls1.json");
        console.log(urls);

        const urls2=  yield ajax("../api/urls2.json");
        console.log(urls2);

        const urls3=  yield ajax("../api/urls3.json");
        console.log(urls3);
    } catch(e){
        console.log(e)
    }
};
const g = main();
function handleResult(result){
    if( result.done ) return;
    result.value.then(function(data){
        handleResult(g.next(data));
    },function(err){
        g.throw(err)
    })
};

handleResult(g.next());

这样我们就完成了一个生成器函数的执行器。这个调用逻辑完全可以复用。

总结：使用Generator生成器函数最明显的一点就是 使我们的异步调用再次回归扁平化，这是js异步编程当中很重要的一步。所以我们不仅要了解它的用法，还应该理解它是如何工作的，当然日常开发中我们都是使用async await的方式！

 

async await

在ECMAScript 2017中新增了async的函数 ，它同样提供了异步编程扁平化的体验。而且它是语言层面标准的异步编程语法。使用起来更加方便可靠。

而且 async await 就是生成器函数更方便的语法糖，它们在语法上也是非常类似的。

只需要把生成器函数main修改为用async关键字修饰的普通函数，再把yield关键字替换为await关键字。这样main函数就成为了标准的async函数了。然后就可以直接调用main函数，它们的效果也是完全一致。

与Generator函数相比async函数最大的好处就是它不需要配合 它的执行器函数来使用了。因为它是语言层面的标准异步编程语法，

javascript">async function main(){
    try{
        const urls =  await ajax("../api/urls.json");
        console.log(urls);
        const posts =  await ajax("../api/posts.json");
        console.log(posts);
        const posts2 =  await ajax("../api/posts.json");
        console.log(posts2);
        const posts3 =  await ajax("../api/posts.json");
        console.log(posts3);
        const posts4 =  await ajax("../api/posts.json");
        console.log(posts4);
        const posts5 =  await ajax("../api/posts.json");
        console.log(posts5);
    } catch(e){
        console.log(e)
    }  
};
main();

然后呢，async函数还能给我们返回一个promise对象，这样就更加利于我们对整体代码的控制。

javascript">const promise = main();
promise.then(function(res){
    console.log("全部完成了！")
})

注意：await关键词只能出现在async函数中，不能直接在普通函数中使用。

如果说了解了生成器函数的异步方案，那async函数只是在写法上略有差异，其他所有的东西都是相同的，所以它也没有什么需要去深究的东西。