【ES6】Generator+Promise异步编程

一、概念

首先我们要理解Generator和Promise的概念。

Generator：意思是生成器，可以在函数内部通过yeild来控制语句的执行或暂停状态。

*Foo(){
    yeild console.log('step1');
    yeild console.log('step2');
}
 
run(foo){
    var step = foo();
    while(!step.done){
        step.next();
    }
}
 
run(Foo);
 
// step1
// step2

通过上面这个例子可以看到，使用*将Foo声明为Generator函数，然后再执行Foo的时候，不会执行到底，而是执行到第一句yeild就停下来。只有调用next()才会执行到下一步yeild。

Promise：是ES6新增的一个对象，相当于一个容器，是用来专门处理异步处理的。

function request = new Promise((resolve,reject) => {
    $.ajax({
        type: "GET",
        url: "/someajaxurl",
        contentType: "application/json",
        dataType: "json",
        success: function (data) {
            resolve(data);
        },
        error: function (xhr) {
            reject(xhr);
        }
    });
}).then(data=>{
    // success  method
}).catch(xhr=>{
    // error method
});

二、Generator和Promise的结合

假设我们有个需求,需要调用两个接口,并且这两个接口不能同时启动异步调用,而是要先调接口1,在调接口2。

那么在没有使用Generator的情况下是这么写的。

// 使用promise异步调用数据
request(url){
    return new Promise((resolve,reject) => {
        $.ajax({
            type: "GET",
            url: "/someajaxurl",
            contentType: "application/json",
            dataType: "json",
            success: function (data) {
                resolve(data);
            },
            error: function (xhr) {
                reject(xhr);
            }
        });
    });
}
 
// 先调用接口1，再点用接口2
gen(){
    var nameList = [];
    request('user/name1').then(data => { 
        nameList.push(data) ;
        request('user/name2').then(data => { 
            nameList.push(data) 
        });
    });
}
 
gen();

以上例子会发现最终会有一个长嵌套的回调函数。

如果我们使用Generator的话，那么代码如下：

// 使用promise异步调用数据
request(url){
    return new Promise((resolve,reject) => {
        $.ajax({
            type: "GET",
            url: "/someajaxurl",
            contentType: "application/json",
            dataType: "json",
            success: function (data) {
                resolve(data);
            },
            error: function (xhr) {
                reject(xhr);
            }
        });
    });
}
 
 
// 使用generator,将回调函数嵌套的写法改为同步写法
*gen(){
    var nameList = [];
    yeild request('user/name1').then(data => { nameList.push(data) });
    yeild request('user/name2').then(data => { nameList.push(data) });
}
 
// 执行generator的next方式
(function(){
    var step = gen();
    while(!step.done){
        step.next();
    }
});

使用generator的写法，会发现省去一大堆的嵌套，代码变得直观很多。

三、Async

上面的例子，发现代码变得直观了，但是还需要另外写个方法去执行generator。这时候ES6中的新特性Async，还可以对代码做进一步的优化。

// 使用async,效果和generator差不多,只不过将函数内部的yeild改为await.但是async自带执行器,不需要另外再写个方法去执行next.
async gen(){
    var nameList = [];
    await request('user/name1').then(data => { nameList.push(data) });
    await request('user/name2').then(data => { nameList.push(data) });
}