Generator

Generator 函数是 ES6 提供的一种异步编程解决方案。Generator函数在function关键字与函数名之间有一个*号。

执行Generator 函数返回一个指向函数内部的指针对象，每次调用该对象的next方法，指针从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式/return语句。
next可传入参数，该参数会作为上一个yield表达式的返回值。
例：

    function* test() {
        yield 'hello';
        const text = yield 'world';
        console.log(text);
        return 'ending';
    }

    let t = test();

    console.log(t.next());//{value: "hello", done: false}
    console.log(t.next());//{value: "world", done: false}                          
    console.log(t.next('!'));//"!"
                            //{value: "ending", done: true}
    console.log(t.next());//{value: undefined, done: true}

假设有异步方法fetchData，如果我们希望通过Generator函数写出串联执行的效果：

    function fetchData(data) {
        return function (cb) {
            setTimeout(function () {
                cb(data + 1);
            }, 500);
        }
    }

    function* test() {

        let t1 = yield fetchData(1);
        let t2 = yield fetchData(t1);
    }

    let t = test();
    t.next().value((data)=>{
        t.next(data).value((data)=>{
            t.next(data);
        });
    });

显然不是我们想要的效果，这时可以做一个Generator自动运行方法，通过递归解决：

    run(test);//这样一句话就够了

    function run(gen) {
        const g = gen();
        next();

        function next() {
            const result = g.next(...arguments);
            if (!result.done) {
                result.value(next);
            }
        }
    }

但异步函数除了使用回调实现，还可以使用Promise实现，这样我们的自动运行方法就要加上对Promise的处理了。

    function run(gen) {
        const g = gen();
        next();

        function next() {
            const result = g.next(...arguments);
            if (!result.done) {
                const value = result.value;
                
                if(isPromise(value)){
                    value.then(next);
                }else{
                    value(next);
                }
            }
        }

        function isPromise(obj){
            if( obj && typeof obj.then == 'function' ) return true;
            return false;
        }
    }

现在已经完成了自动执行的功能，但存在两个问题。

1. 不能获取到Generator函数最终return的值。
2. 但如果异步操作中发生了异常，现在是没办法处理的。

为了解决这两个问题，需要作出修改

• run方法返回一个Promise，最终通过Promise来返回结果
• 递归调用next时，加上onRejected进行处理。而对于使用回调进行异步的方法，则将其转换成一个Promise，使代码可以复用。

如果异步方法返回的不是promise，则包装成一个promise来处理。

    function toPromise(obj) {
        if (isPromise(obj)) return obj;
        if ('function' === typeof obj) return thunkToPromise(obj);
        return obj;
    }

    function isPromise(obj) {
        if (obj && typeof obj.then === 'function') return true;
        return false;
    }

    function thunkToPromise(obj) {
        return new Promise((resolve, reject) => {
            //error first模式，回调函数接收的第一个参数为error
            obj(function (err) {
                if (err) return reject(err);
                resolve([].splice.call(arguments, 1));
            });
        })
    }

最后run方法返回一个promise，这样外部就可以获取到自动执行中遇到的异常或最终结果了。

    function run(gen) {
        return new Promise((resolve, reject) => {
            const g = gen();
            next();

            function next() {
                const result = g.next(...arguments);
                if (!result.done) {
                    const promise = toPromise(result.value);
                    promise.then(next, reject);//遇到问题就用reject返回异常，不继续递归
                } else {
                    resolve(result.value);//返回最终执行结果
                }
            }
        })
    }

async函数

async函数是ES2017标准引入的一种异步操作方式，在function前加上async使用。
例：

    test();
    
    async function test(){
        let t1 = await fetchData('lin');
        console.log(t1);//data of lin
        let t2 = await fetchData('qibin');
        console.log(t2);//data of qibin
    }

    function fetchData(name) {
        return new Promise((resolve, reject) => {
            setTimeout(function () {
                resolve(`data of ${name}`);
            }, 500);
        })
    }

很熟悉有没有！其实async函数就是Generator+自动执行。
async异步操作超级优雅，是我认为js异步操作最好的形式。

更多关于Generator及async函数