异步函数 async/awit

最新推荐文章于 2024-08-16 11:35:39 发布

小宇宙chris_310

最新推荐文章于 2024-08-16 11:35:39 发布

阅读量7.7k

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_38796823/article/details/88210930

版权

javascript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

1. 概念

async/await是es8的规范
async 后面一般跟一个函数，也就是async一般跟在function前。
await必须放在aysnc里面的函数体范围内
await后面应该跟一个promise对象
当使用了async/await后，程序流程就是：当执行到async/await程序时，进入async标识的函数体中，然后直到遇到了await，然后让await后面的代码执行（一般为一个异步操作，然后会返回一个promise对象），然后await能将右边promise的值返回给左边的变量。如 var bl=await promisObj; b1能够获取promise的值。同时如果async标识了的函数返回一个值的话，async函数左边的变量也能接收到其返回值，不过其返回值会是一个promise对象。
要注意await只能在async中使用，不然是没有效果的。其实async 和await联合起来使用相当于替代了Promise的then和catch方法，将async后面的函数里面的代码由异步变成了同步阻塞式，只有当await定义的函数执行完了代码才会继续往下执行，同时await还有返回值。然后，reject的值需要通过try {}catch(err){}捕获,
async函数中如果没有返回值，那么会返回一个undefined到promise对象的值中进行返回，不管如何，执行了异步等待后，最终的返回值就一定是一个promise对象，哪怕是值为undefined的promise对象
现在最新版本的主流浏览器一般都支持fetch,promise,async/await，所以可以直接使用。

2. 使用异步等待连续发起多次请求

如果要使用async/await发起多次请求，那么需要在async标识的函数里面连续写多个await，并把请求的结果返回

案例

<body>
    用户名：<input type="text" value="admin">
    密码：<input type="password" value="12345">
    <button type="button">登陆</button><br>
    <div></div>
</body>
<script src="./jquery-3.3.1.js"></script>
<script>
    $(function () {
        $('button').on('click', function () {
            let username = $('input:text').val()
            let password = $('input:password').val()
            let dataObj = {
                username: username,
                password: password
            }
            
            let fn = async function () {
                // 第一次发起请求
                let res = await $.post('http://127.0.0.1:8081/login',dataObj,function (data) {
                    if (data.msg == "yes") {
                        return data;
                    }
                })
                console.log(res)
                let resObj=JSON.parse(res)
                // 第二次发起请求
                let username1=resObj.username;
                if(username1='admin'){
                    var res1=await $.get('http://127.0.0.1:8081/getInf?username='+username1,function(data){
                        return data;
                    })
                }
                console.log(res1)
                // 第三次发起请求
                let level=res1.level;
                let name=res1.name;
                let sex=res1.sex;
                let res2=await $.get('http://127.0.0.1:8081/getSum?level='+level,function(data){
                    let sum=data.sum;
                    $('div').append(`名字：${name}<br>性别：${sex}<br>等级：${level}<br>总额：${sum}`)
                })
            }
            //不要忘记执行函数哦
            fn();
        })
    })
</script>