async 原理很难？ 25行搞定

注视都写到了代码里面，方面解释和理解！

const {
    log
} = console
// 先来看一下迭代器
// for await 
const testAsync = (tips, time = 1000) => new Promise(res => setTimeout(() => res(tips), time))
/**
 * for await ES2020新增
 */
let arr = [testAsync('我', 1000), testAsync('出', 2000), testAsync('现', 3000), testAsync('了', 4000)]
async function par1(a) {
    for await (let key of a) {
        log(key)
    }
}
// par1(arr) // 测试可打开

// 看起来更便捷了吧 -- ES7
async function par2(a) {
    for (let key of a) {
        let res = await key
        log(res, key)
        // 就是then的简化版而已
        // key.then(res => {
        //     log(res)
        // })
    }
}

// par2(arr) // 测试可打开

// 先来看下genertor是什么玩意！ 除去权威指南版本，全程自我理解

function* genertorStudy() {
    let data1 = yield testAsync('第一步')
    log(data1, '我执行了')
    let data2 = yield testAsync('第二步了')
    log(data2, '又被执行了')
    return '啊波次的呢'
}
// 以下就是(asnyc)雏形;只不过是手动化的 
let pCor = genertorStudy(); // 創建生成器
// log(pCor) // Object [Generator] {}
let pOne = pCor.next(); // 执行下次Func
// log(pOne) //  { value: Promise { <pending> }, done: false } 第一次执行到 yield 第一步 的promise， so 可以拿到$.value.then这个api
pOne.value.then(resV => {
    // log(resV) // log -> 第一步 /////// 这个console 是可以拿到promise的值的; 这个log执行的是 yield testAsync('第一步')
    // 这里并没有当做参数进行返回到 data1 的, 所以现在还未执行 36行 "log(data1)"
    let pTwo = pCor.next(resV) // 36行 log(data1, '我执行了') ->  "第一步 我执行了"  //////// 这边"pCor.next(resV)"直接把参数返回给了赋值data1, 注意 这里是 "pCor.next";这有生成器的next传入参数，才回把值返回给等号（=）左侧
    // console.log(pTwo) // log -> { value: Promise { <pending> }, done: false } //// 这里直接拿到下一次的异步 
    pTwo.value.then(resv2 => {
        // log(resv2) //log -> 第二步了 //// 这里拿到 37行第二个promise的执行结果； 为赋值给data2
        let pThree = pCor.next(resv2) // log -> 第二步了 又被执行了 //// 执行了38行代码 依旧调用pCor
        // log(pThree) // log -> { value: '啊波次的呢', done: true } //// 注意这里的done 变为true了 也就是说这个Genertor执行到此结束
        if (pThree.done) {
            pCor.next(pThree.value)
            log(pThree.value) // 返回出去并打印
        }

    })
})
// 下面要把以上内容变成自动化, 如有不理解请对比综上代码!
/**
 * 下面就是全部的async的原理代码了
 * @param {*} fn 
 * @returns 
 */
function _asyncToGenerator(fn) {
    return function () {
        var gen = fn.apply(this, arguments);
        return new Promise(function (resolve, reject) {
            function step(key, arg) {
                try {
                    var info = gen[key](arg);
                    var value = info.value;
                } catch (error) {
                    return reject(error);
                }
                console.log(value)
                if (info.done) { // genertor 的 返回值 done 代表全部执行完成
                    resolve(value);
                } else {
                    return Promise.resolve(value).then(function (value) {
                        return step("next", value);
                    }, function (err) {
                        return step("throw", err);
                    });
                }
            }
            return step("next");
        });
    };
}
export default _asyncToGenerator