js中异步函数asyncfunction变同步函数的简单入门

new Promise(function (resolve, reject) {
    // 要做的事情...
});

<script>
    var GoodsInfo = {};
    $(document).ready(function(){
    //    使用Promise
    new Promise(function (resolve,reject) {
            $.ajax({url:"https://api-hmugo- WEB.itheima.net/api/public/v1/home/catitems",success:function(result){
                    goodsInfo = result;
                    resolve(goodsInfo);
                    console.log(goodsInfo);
                }});
        }).then(function () {
            console.log(goodsInfo);
        })
        console.log(1);
        console.log(goodsInfo);
    });
</script>

<script>
 
    var goodsInfo = {};
    $(document).ready(function(){
 
// 封装一个 promise 函数，在promiise对象前面多加了一个return
        function promiseFun (url){
            return new Promise(function (resolve,reject) {
                $.ajax({url:url,success:function(result){
                        goodsInfo = result;
                        resolve(goodsInfo);
                        console.log(goodsInfo);
                    }});
            })
        }
// 调用函数
        promiseFun("Https://api-hmugo-web.itheima.net/api/public/v1/home/catitems").then(function () {
            console.log(goodsInfo);
        })
        console.log(1);
        console.log(goodsInfo);
    });
</script>

// 定义规则
async function asyncFunc() {
    // await 后面必须是定义过的 promise function 
    await myfunction();
    await youfunction();
    await shefunction();
    somefunction();
    xxxxxx;
    
}
asyncFunc();

<script>
    var goodsInfo = {};
    var data ={};
    $(document).ready(function(){
// 先定义一个 promise function
        function promiseFun (url){
            return new Promise(function (resolve,reject) {
                $.ajax({url:url,success:function(result){
                        goodsInfo = result;
                        resolve(goodsInfo);
                        console.log(goodsInfo);
                    }});
            })
        }
// 在定义一个 asyns function 
     async function asyncFuunc(){
// 看这里面的代码执行顺序是不是跟同步函数简直一模一样
            await promiseFun("https://api-hmugo-web.itheima.net/api/public/v1/home/catitems");
            console.log(goodsInfo);
            data=goodsInfo;
            console.log(data)
            console.log(2);
     }
// 调用 asyns 函数
        asyncFuunc();
        console.log(1);
        console.log(goodsInfo);
    });
</script>

    async function foo() {}   
    let bar = async function() {};  
    let baz = async() => {};   
    class Qux {   
        async qux() {}   
    }

    async function foo(){
        console.log(1)
    }

    console.log(foo()); //promise {<fulfilled>:undefined}
    foo().then(console.log) //undefined
    console.log(2)
    //1
    //2
    //undefined

async function foo(){
    await Promise.resolve(3);
}
foo();

    async function foo() { 
        console.log(2);   
        await null;
        console.log(4);  
    }   
    console.log(1);
    foo();
    console.log(3);
    // 1
    // 2
    // 3
    // 4
    
    控制台中输出结果的顺序很好地解释了运行时的工作过程：
    （1）打印1；
    （2）调用异步函数foo()；
    （3）（在foo()中）打印2；
    （4）（在foo()中）await关键字暂停执行，为立即可用的值null向消息队列中添加一个任务；
    （5）foo()退出；
    （6）打印3；
    （7）同步线程的代码执行完毕；
    （8）JavaScript运行时从消息队列中取出任务，恢复异步函数执行；
    （9）（在foo()中）恢复执行，await取得null值（这里并没有使用）；
    （10）（在foo()中）打印4；
    （11）foo()返回。

 async function sleep(delay) {
        return new Promise((resolve) => setTimeout(resolve, delay));
    }

    async function sleepfoo(){
        const t0 = Date.now();
        await sleep(2000);
        const t1 = Date.now();
        console.log(t1 - t0);
    }
    sleepfoo()
    //2002  任务队列执行，时间不一定