Generator + Promise 实现 async await 效果

async 是 ES7 才有的与异步操作有关的关键字，和 Promise ， Generator 有很大关联的

async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。

await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用

async awit 使用示例

asyncfunctiongetResult() {
    awaitnewPromise((resolve, reject)=>{
        setTimeout(() => {
            resolve(1)
            console.log(1);
        }, 1000);
    })
    awaitnewPromise((resolve, reject)=>{
        setTimeout(() => {
            resolve(2)                    
            console.log(2);
        }, 500);
    })
    awaitnewPromise((resolve, reject)=>{
        setTimeout(() => {
            resolve(3)
            console.log(3);
        }, 100);
    })
}
getResult() // 1 2 3

​

Generator + Promise 实现相同效果

// Generator 函数不同于普通函数，是可以暂停执行的，所以函数名之前要加星号 *，以示区别。

// yield是JS为了解决异步调用的命令。表示程序执行到这里会交出执行权，等待结果返回。它需要在协程Generator 函数中运行。

// 整个 Generator 函数就是一个封装的异步任务，或者说是异步任务的容器。异步操作需要暂停的地方，都用 yield 语句注明。

function*getResult() {
    yieldnewPromise((resolve, reject)=>{
        setTimeout(() => {
            resolve(1)
            console.log(1);
        }, 1000);
    })
    yieldnewPromise((resolve, reject)=>{
        setTimeout(() => {
            resolve(2)
            console.log(2);
        }, 500);
    })
    yieldnewPromise((resolve, reject)=>{
        setTimeout(() => {
            resolve(3)
            console.log(3);
        }, 100);
    })
}
constgen=getResult()
// gen.next() = {value: yield 返回的数据， done： 迭代器是否走完}
// gen.next().value 就是每一次 yield 之后返回的 Promise
​
// 递归封装
functionco(g) {
    constnewObj=g.next()
    // 递归停止条件： 当迭代器到最后一个yield
    if (newObj.done) {
        return
    }
    nextObj.value.then(()=>{
        co(g)
    })
}
​
co(gen) // 1 2 3