async/await 详解

什么是async/await

async、await是为了解决Promise多层嵌套问题

new Promise(() => {}).then(() => {
     new Promise(() => {
     
    }).then(() => {
        new Promise(() => {
        
        }).then(() => {
        
        })
    })
})

逻辑复杂，还难以阅读，也容易出现bug。async、await应运而生

await后面的代码会在Promise执行完成之后再去执行，这里需要去了解 ES6的Generator，因为async await是基于Generator实现的代码中断操作

function * myGenerator(){
    yield console.log('第一次执行');
    yield console.log('第二次执行');
    yield console.log('第三次执行');
}

const g = myGenerator();
g.next();

执行几次next就返回第几次yield的值，执行到最后一个yield之后返回{done:false}

console.log(res1)并没有执行

第二次next会执行第一次yield下面的代码片段，依次类推。

给next传参看看

res返回值是next的入参，第一个res接收的是第二个next的入参

用Generator实现一下async、await

分析一下async、await

首先返回的是一个可调用函数，并且函数的返回结果是Promise

function myAsync(executeFn) {
    // 接受一个Generator执行函数
    function generatorFn(execute, gen, resolve, reject) {
        try {
            const value = gen.value;
        if (gen.done) {
            resolve(value);
        } else {
            Promise.resolve(value).then(value => {
                let nextgen = execute.next(value);
                generatorFn(execute, nextgen, resolve, reject);
                return nextgen;
            });
        }
        } catch (error) {
            reject(error)
        }
        
    }
   
    return function () {
        const _this = this;
        const _arguments = arguments
        return new Promise((resolve, reject) => {
            try {
                const execute = executeFn.apply(_this,_arguments);
                const gen = execute.next(); // 初始化执行next
                generatorFn(execute, gen, resolve, reject);
            } catch (error) {
                reject(error)
            }
           
        });
    };
}