# async await

ES2017(es7) 标准引入了 async 函数，使得异步操作变得更加方便。

async await async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。 async await 最大的好处是让前端有了能力以同步的方式写异步的代码
- async async函数返回一个 Promise 对象语义上理解当函数前面加上async表示函数内部有异步操作

<script>
    async function main(){ // 声明一个异步函数
        return 1  // return的结果 相当于resolve出去的结果
    }
    console.log(main()) // Promise {<resolved>: 1}
    // 获取async返回的结果通过.then获取
    main().then(res => console.log(res)); // 1
</script>

await await 关键字要在 async 关键字函数的内部，await 写在外面会报错。 await右侧如果是函数，那么函数的return值就是「表达式的结果」 await右侧如果是一个 'hello' 或者什么值，那表达式的结果就是 'hello' await关键字会阻塞后面代码的运行

<script>
    async function async1() {
        console.log( 'async1 start' )
        await async2() // 使用await关键字之后 await下面的代码会被阻塞 也就是说会先跳出当前的async1函数  先执行 console.log( 'script start' )
        console.log( 'async1 end' )
    }
    async function async2() {
        console.log( 'async2' )
    }
    async1()
    console.log( 'script start' )
    //  结果会是 
    // async1 start
    // async2
    // script start
    // async1 end
</script>

案例接口地址

<script>
   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
    
</head>
<body>
    <div>
        <p><label for="">请输入用户名：<input type="text" id="names" value="411524" placeholder="请输入用户名"></label></p>
        <p><label for="">请输入密码：<input type="text" id="pass" value="411524" placeholder="请输入密码"></label></p>
        <button onclick="login()">
            登陆
        </button>
        <p id="text"></p>
    </div>
   <script>
    //    需求  登陆之后 查看用户反馈 下面以两种方式给大家演示  用到的接口有 
    //    开发者登陆  https://api.apiopen.top/developerLogin
    //    查看反馈  https://api.apiopen.top/getFeedback
    
    // 第一种 普通的方式  
    function login(){
       doLogin();
    }
    function doLogin(){
        var name = $("#names").val();
        var pass = $("#pass").val();
        $.ajax({
            url:"https://api.apiopen.top/developerLogin",
            type:"post",
            data:{
                name:name,
                passwd:pass
            },
            success(res){ 
                if(res.code == 200){ 
                    getInfo(res)
                }else{
                    alert(res.message)
                }
            }
        })
    }
    function getInfo(val){
        $.ajax({
            url:"https://api.apiopen.top/getFeedback",
            type:"post",
            data:{
                apikey:val.result.apikey,
            },
            success(res){
                $("#text").html(JSON.stringify(res))
            }
        })
    }
    

    // // 第二种方式  es7 的async await 
    // async function login(){
    //     var data = await doLogin();
    //     var msg = await getRes(data.result.apikey);
    //     console.log(msg);
    // }
    // async function doLogin(){
    //     var name = $("#names").val();
    //     var pass = $("#pass").val();
    //     var data = $.ajax({
    //         url:"https://api.apiopen.top/developerLogin",
    //         type:"post",
    //         data:{
    //             name:name,
    //             passwd:pass
    //         }
    //     });
    //     return data
    // }
    // async function getRes(val){
    //     var data = $.ajax({
    //         url:"https://api.apiopen.top/getFeedback",
    //         type:"post",
    //         data:{
    //             apikey:val
    //         }
    //     });
    //     return data
    // }
   </script>
</body>
</html>
</script>

← Promise 面向对象 →