ES6基础入门（四)—— async函数详解

1.async函数的基本使用

2.async函数案例

3.与Generator的对比

<script>
    //1.async函数的基本语法：异步函数，发送异步请求
    
   //发送异步请求的函数
    function getData(code){
        return new Promise((resolve,reject) =>{
        setTimeout(() => {
        console.log(code);
        resolve("hello");
    },2000);
        })
    }
    //async函数的定义
    //async函数的返回值一定是一个promise对象
    //async必须在前一个awite的promise进入resolve状态的时候才会执行下一个await
    //自动往下执行
    //async函数调用了以后，自动执行
    async function sendAjax(){
        //这里的返回值，就是promise对象resolve方法传入的参数
        const res = await getData("first");
        console.log(res); //hello
        await getData("second");
        await getData("third");
        await getData("fourth");
    }
    sendAjax();
    
    //**********************************************************************************//
    //2.案例
    function getData(url){
        return new Promise((resolve,reject){
            $.get(url,data => {
                console.log(data)
                //避免回调函数的嵌套
                resolve(`http://localhost:3000${data.commentUrl}`);
                //reject("未获取到商品信息")
            }，"json");
            
         })
    }
    
  //  getData("http://localhost:3000/goods_detail?id=2");
    
    //使用async完成
    async function getGoods(){
       const commentsUrl =  await getData("http://localhost:3000/goods_detail?id=2");
        await getData(commentsUrl );
    }
    //调用async函数
    getGoods();
    
    //跟Generator函数的比较：
    //1.await调用必须返回的是promise对象 2.async调用语法语义更加明确 
    //3.async函数有内部的自动执行器，不用通过next来执行下一步请求
    //不是自动一步步往下走，控制函数执行时机的话使用Generator比较合适
    //按顺序发送请求，一步步往下执行使用async比较合适
</script>

    //跟Generator函数的比较：
    //1.await调用必须返回的是promise对象 2.async调用语法语义更加明确 
    //3.async函数有内部的自动执行器，不用通过next来执行下一步请求
    //不是自动一步步往下走，控制函数执行时机的话使用Generator比较合适
    //按顺序发送请求，一步步往下执行使用async比较合适