aysnc await 解决异步编程顺序问题

场景1

//场景1： 两个异步方法 独立的
    var asyncFn1 = (x) => {
        
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(x);
            }, 3000)
        })
    }

    var asyncFn2 = (y) => {
        
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(y);
            }, 1000)
        })
    }


    async function asyncTest() {
        console.log("async 开始");
        let x = await asyncFn1("asyncFn1");
        console.log(x);
        let y = await asyncFn2("asyncFn2");
        console.log(y)
        console.log("async 结束")
        
    }
    console.log("外层 开始");
    asyncTest();
    console.log("外层 结束");

    //打印结果
    /**
     * 
     *  外层 开始
        async 开始
        外层 结束
        asyncFn1
        asyncFn2
        async 结束
     * 
    */

场景2

let map = new Map();
    let mapValue = "";
    
    //场景2： 两个异步方法 先后顺序
    var asyncFn1 = (x) => {
        return new Promise((resolve) => {
            setTimeout(() => {
                map = x;
                resolve(map);
            }, 3000)
        })
    }

    var asyncFn2 = (y) => {
        return new Promise((resolve) => {
            setTimeout(() => {
                mapValue = map.get(y);
                resolve(mapValue);
            }, 1000)
        })
    }


    async function asyncTest() {
        console.log("async 开始");
        let m = new Map();
        m.set("key", "value");
        let x = await asyncFn1(m);
        console.log(x);
        let y = await asyncFn2("key");
        console.log(y)
        console.log("async 结束")
        
    }
    console.log("外层 开始");
    asyncTest();
    console.log("外层 结束");

    //打印结果
    /**
     * 
     *  外层 开始
        async 开始
        外层 结束
        map对象
        value
        async 结束
     * 
    */

场景3

let map = new Map();
    let mapValue = "";
    
    //场景3： 一个同步方法一个异步方法   先后顺序（同步方法依赖异步方法值， 就是说期望的 异步方法先执行，同步然后再执行）
    var asyncFn = (x) => { //异步方法，生成map对象
        return  new Promise((resolve) => {
            setTimeout(() => {
                map = x;
                resolve(map);
            }, 3000)
        })
    }

    var syncFn = (y) => { //同步方法，通过map对象获取vaule
        mapValue = map.get(y);
        return mapValue;
    }


    async function asyncAndsyncTest() {
        console.log("asyncAndsync 开始");
        let m = new Map();
        m.set("key", "value");
        let x = await asyncFn(m);
        console.log(x);
        let y = syncFn("key");
        console.log(y)
        console.log("asyncAndsync 结束")
        
    }
    console.log("外层 开始");
    asyncAndsyncTest();
    console.log("外层 结束");

    //打印结果
    /**
     * 
     *  外层 开始
        asyncAndsync 开始
        外层 结束
        map对象
        value
        asyncAndsync 结束
     * 
    */

场景4

 let map = new Map();
    let mapValue = "";
    
    //场景4： 一个同步方法一个异步方法   先后顺序（同步方法依赖异步方法值， 就是说期望的 异步方法先执行，同步然后再执行）(原始方法解决)
    var asyncFn = (x) => { //异步方法，生成map对象
        
            setTimeout(() => {
                map = x;
            }, 1000)
      
    }

    var syncFn = (y) => { //同步方法，通过map对象获取vaule

      
            mapValue = map.get(y);
      
        return mapValue;
    }


    function asyncAndsyncTest() {
        console.log("asyncAndsync 开始");
        let m = new Map();
        m.set("key", "value");
        asyncFn(m);
        setTimeout(() => {
            console.log(map);
            let y = syncFn("key");
            console.log(y)
        }, 2000)
       
        console.log("asyncAndsync 结束")
        
    }
    console.log("外层 开始");
    asyncAndsyncTest();
    console.log("外层 结束");

    //打印结果
    /**
     * 
     *  外层 开始
        asyncAndsync 开始
        外层 结束
        map对象
        value
        asyncAndsync 结束
     * 
    */

总结

async是ES7
async语法使得代码简洁清晰，不需要写那么多的箭头函数，避免了代码嵌套
async在接收上一个返回值为参数时，比较方便

async/await与Promise一样，是非阻塞的。
async函数是Generator 函数的语法糖 ，async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await；进一步说就是async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。