async和await

最新推荐文章于 2024-01-15 15:32:33 发布
最新推荐文章于 2024-01-15 15:32:33 发布
阅读量382 收藏
点赞数 1
分类专栏： web前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42943107/article/details/102532369
版权

上一篇文章promise的使用的需求还没有写完。
代码如下：

<!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>
</head>
<body>
    <script>
var pro = new Promise((resolve,reject) => {
            setTimeout(() => {
                    //结果为正面
                    var res1 ="resultTrue";
                    //结果为反面
                    var res2 ="resultFalse";
                    //假设的结果
                    var res = res1;

                    if(res === "resultFalse"){
                        // console.log("表扬糖果")
                        resolve();
                    }else{
                        // console.log("惩罚站立")
                        reject();
                    }   
                },2000)
        })

        //pro当做axios
        pro.then(() => {
            console.log("表扬糖果")
        }).catch(() => {
            console.log("惩罚站立")
        })
    </script>
</body>
</html>

这个方法虽然可以调用了，但是只是给李白用的。这样不满足需求。
Promise是一个构造函数，返回一个promise对象。
现在我们使上面例子一旦调用就返回一个promise对象的方式来是实现李白投硬币，根据硬币返回结果。

<!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>
</head>
<body>
    <script>
       function test(){
            return new Promise((resolve,reject) => {
            setTimeout(() => {
                    //结果为正面
                    var res1 ="resultTrue";
                    //结果为反面
                    var res2 ="resultFalse";
                    //假设的结果
                    var res = res1;

                    if(res === "resultFalse"){
                        // console.log("表扬糖果")
                        resolve();
                    }else{
                        // console.log("惩罚站立")
                        reject();
                    }   
                },2000)
            })
       }

       //pro当做axio,test()返回的就是一个promise对象
        test().then(() => {
            console.log("表扬糖果")
        }).catch(() => {
            console.log("惩罚站立")
        })
       
    </script>
</body>
</html>
    </script>
</body>
</html>

这个只是李白的投币的情况。还有杜甫等其他的诗人也会投币。如果硬币只有一枚，那么投币的人应该有先后顺序。

先是李白投币:

<!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>
</head>
<body>
    <script>
       //李白投币 
       function liBai(){
            return new Promise((resolve,reject) => {
            setTimeout(() => {
                    //结果为正面
                    var res1 ="resultTrue";
                    //结果为反面
                    var res2 ="resultFalse";
                    //假设的结果
                    var res = res1;

                    if(res === "resultTrue"){
                        // console.log("表扬糖果")
                        resolve();
                    }else{
                        // console.log("惩罚站立")
                        reject();
                    }   
                },2000)
            })
       }
       //杜甫投币
       function duFu(){
            return new Promise((resolve,reject) => {
            setTimeout(() => {
                    //结果为正面
                    var res1 ="resultTrue";
                    //结果为反面
                    var res2 ="resultFalse";
                    //假设的结果
                    var res = res1;

                    if(res === "resultTrue"){
                        // console.log("表扬糖果")
                        resolve();
                    }else{
                        // console.log("惩罚站立")
                        reject();
                    }   
                },2000)
            })
       }

       //pro当做axio,test()返回的就是一个promise对象
        // test().then(() => {
        //     console.log("表扬糖果")
        // }).catch(() => {
        //     console.log("惩罚站立")
        // })

        liBai().then(() => {
            console.log("表扬糖果")

        })
       
    </script>
</body>
</html>

两秒后显示结果：
在这里插入图片描述

两秒后，杜甫投硬币:

liBai().then(() => {
            console.log("表扬糖果")

            duFu().then(() => {
                console.log("表扬糖果，表扬糖果")
            })
        })

从上面的代码可以看出杜甫的方法是嵌套到李白的方法里面的。
为什么要这样做？？？
因为我们之前的条件是只有一枚硬币，多个诗人投掷。由于只有一枚硬币。那么投掷的时候就有先后顺序。如果都杜甫的方法放在外面，那么运行代码的时候就是李白和杜甫的运行结果同时出来，这样就不符合条件，因为只有一枚硬币，投掷就要有先后顺序，那么输出的结束也要有先后的顺序。因此，李白先投，杜甫后投，杜甫的方法就要嵌套到李白的方法里面的。

运行结果：

在这里插入图片描述
现在是两个人投硬币，这样写还行，如果是更多人，就一直嵌套，一直嵌套。针对这种情况，可以通过Async和await对上面的一直嵌套进行优化。Async是异步的意思，await是等待的意思Async用来声明当前函数是一个异步函数，await等于异步的结果await后面接受的是promise的对象，函数前面添加了async标识后函数中才可以使用await等待promise的调用

先看一下有两个人投掷硬币的方法:

<!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>
</head>
<body>
    <script>
       //李白投币 
       function liBai(){
            return new Promise((resolve,reject) => {
            setTimeout(() => {
                    //结果为正面
                    var res1 ="resultTrue";
                    //结果为反面
                    var res2 ="resultFalse";
                    //假设的结果
                    var res = res1;

                    if(res === "resultTrue"){
                        // console.log("表扬糖果")
                        resolve();
                    }else{
                        // console.log("惩罚站立")
                        reject();
                    }   
                },2000)
            })
       }
       //杜甫投币
       function duFu(){
            return new Promise((resolve,reject) => {
            setTimeout(() => {
                    //结果为正面
                    var res1 ="resultTrue";
                    //结果为反面
                    var res2 ="resultFalse";
                    //假设的结果
                    var res = res1;

                    if(res === "resultTrue"){
                        // console.log("表扬糖果")
                        resolve();
                    }else{
                        // console.log("惩罚站立")
                        reject();
                    }   
                },2000)
            })
       }
    
    
    </script>
</body>
</html>
    </script>
</body>
</html>

既然这个方法后面接受的是promise对象，先想一下await要怎样才能接受promise 对象。由于async和await要用到函数里面的。因此先声明一个test函数，函数的前面加上一个async。

//函数前面添加了async标识后函数中才可以使用await等待promise的调用
        var test = async function(){
            
        }

函数前面添加了async标识后，函数才可以使用await等待promise的调用，如果这句话成立的话，就可以直接在async里面直接用promise，用await先调用李白投硬币

//函数前面添加了async标识后函数中才可以使用await等待promise的调用
        var test =async function(){
            //promise对象的then函数返回一个promise
            await liBai();
        }

        test();

运行代码：
在这里插入图片描述
运行代码后，发现没有结果，之前的例子是：

liBai().then(() => {
      console.log("表扬糖果")
})

之前的例子是通过 .then() 来接收结果，而这里 await liBai() 接收不到运行的结果。
await后面接受的是promise对象，而 **awai liBai()**里面也是一个promise。
不只liBai() 是一个promise，而promise对象的then函数也可以返回一个promise。
由于liBai().then()返回就是一个promise，刚好await接收的也是一个promise对象。
李白先投硬币就可以这样写：

//函数前面添加了async标识后函数中才可以使用await等待promise的调用
        var test = async function(){
            //promise对象的then函数返回一个promise
            await liBai().then(() => {
                console.log("表扬糖果")
            });
        }

	test();

运行结果：
在这里插入图片描述
从运行的结果，我么可以看出async和wait的这种方式，可以运行出结果。

现在就promise结果async和wait来满足等待李白投完硬币后，判断出结果后，杜甫再投硬币，判断出结果。

//函数前面添加了async标识后函数中才可以使用await等待promise的调用
        var test =async function(){
            //promise对象的then函数返回一个promise
            await liBai().then(() => {
                console.log("表扬糖果")
            });
            
            await duFu().then(() => {
                console.log("表扬糖果，表扬糖果")
            })
        }

        test();

运行结果：
在这里插入图片描述
如果李白没有执行完毕，杜甫不会执行。使用await和promise的调用相比于一直嵌套的方式更容易被人理解。Await后面接受的是promise对象

如果还有多个诗人也要投硬币，就像在李白后面添加杜甫的方式，添加其他的诗人就可以了。这样就满足一枚硬币，多人按顺序投币，按顺序显示出对应结果的需求。

例子：

<!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>
</head>
<body>
    <script>
       //李白投币 
       function liBai(){
            return new Promise((resolve,reject) => {
            setTimeout(() => {
                    //结果为正面
                    var res1 ="resultTrue";
                    //结果为反面
                    var res2 ="resultFalse";
                    //假设的结果
                    var res = res1;

                    if(res === "resultTrue"){
                        // console.log("表扬糖果")
                        resolve();
                    }else{
                        // console.log("惩罚站立")
                        reject();
                    }   
                },2000)
            })
       }
       //杜甫投币
       function duFu(){
            return new Promise((resolve,reject) => {
            setTimeout(() => {
                    //结果为正面
                    var res1 ="resultTrue";
                    //结果为反面
                    var res2 ="resultFalse";
                    //假设的结果
                    var res = res1;

                    if(res === "resultTrue"){
                        // console.log("表扬糖果")
                        resolve();
                    }else{
                        // console.log("惩罚站立")
                        reject();
                    }   
                },2000)
            })
       }

       //李商隐投币
       function liShangYing(){
            return new Promise((resolve,reject) => {
            setTimeout(() => {
                    //结果为正面
                    var res1 ="resultTrue";
                    //结果为反面
                    var res2 ="resultFalse";
                    //假设的结果
                    var res = res1;

                    if(res === "resultTrue"){
                        // console.log("表扬糖果，表扬糖果，表扬糖果")
                        resolve();
                    }else{
                        // console.log("惩罚站立")
                        reject();
                    }   
                },2000)
            })
       }

       //webshitian投币
       function webShiTian(){
            return new Promise((resolve,reject) => {
            setTimeout(() => {
                    //结果为正面
                    var res1 ="resultTrue";
                    //结果为反面
                    var res2 ="resultFalse";
                    //假设的结果
                    var res = res1;

                    if(res === "resultTrue"){
                        // console.log("表扬糖果，表扬糖果，表扬糖果")
                        resolve();
                    }else{
                        // console.log("惩罚站立")
                        reject();
                    }   
                },2000)
            })
       }
       
	   
        //函数前面添加了async标识后函数中才可以使用await等待promise的调用
        var test =async function(){
            //promise对象的then函数返回一个promise
            // await liBai();
            await liBai().then(() => {
                console.log("表扬糖果")
            });
            
            await duFu().then(() => {
                console.log("表扬糖果，表扬糖果")
            })

            await liShangYing().then(() => {
                console.log("表扬糖果，表扬糖果，表扬糖果")
            })

            await webShiTian().then(() => {
                console.log("表扬糖果，表扬糖果，表扬糖果,表扬糖果")
            })
        }

        test();
    
    
    </script>
</body>
</html>

运行结果：
在这里插入图片描述

Async和await，主要用户多次调用promise嵌套时候可以考虑使用async await。Promise和async await这两个知识点主要是在使用Element 的Message Box组件的时候用到，结合网上的教程总结一下。

webshitian
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
理解异步函数async和await的用法
铁锤妹妹的博客
03-23 7万+
async作为一个关键字放在函数前面，表示该函数是一个异步函数，异步函数意味着该函数的执行不会阻塞后面代码的执行；而 await 用于等待一个异步方法执行完成
Async/await详解
Ronychen的博客
05-25 1964
他是在ES8被提出的一种异步方式，它其实是promise的一种语法糖。
async/await 的理解和用法
qq_42941302的博客
10-23 15万+
async/await是什么 async/await 是ES7提出的基于Promise的解决异步的最终方案。 async async是一个加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then，返回值就是then方法传入的函数。 // async基础语法 async function fun0(){ console.log(1); return 1; } fun0().then(val=>{ conso
async 和 await（详解）
前端知识库
07-04 2万+
一、async 和 await promise 使用 .then 链式调用，但也是基于回调函数 async/await 更加优雅的异步编程的写法 1.它是消灭异步回调的终极武器 2.它是同步语法，也就是用同步的写法写异步的代码 案例1：promise异步加载图片 分别使用 .then 和 await 来获取结果 区别 1.await 完全没有回调函数 2.await 是同步写法，异步操作 3.await 后面不仅仅可以接 promise对象，还可以接 async 函数 //里面函数为AJAX，因此是
async/await
visibleforest的博客
08-11 966
通过这一章的学习，我们已经了解了Promise是如何解决异步回调地狱问题的，接下来我们来 扩展一个新的知识——async和await 一、什么是async/await？ async/await 是基于Promise实现的。 async/await 使得异步代码看起来像同步代码。 以前的方法有回调函数和Promise, async/await是写异步代码的新方法。 二、async/await语法 async函数返回一个Promise对象，可以使用then 方法添加回调函数。当函数执行的时候，一旦遇
浅谈C#中的Async和Await的用法详解
12-31
众所周知C#提供Async和Await关键字来实现异步编程。在本文中，我们将共同探讨并介绍什么是Async 和 Await，以及如何在C#中使用Async 和 Await。 同样本文的内容也大多是翻译的，只不过加上了自己的理解进行了相关...
async和await用法介绍
01-13
async和await用法
说说C#的async和await的具体用法
08-29
本篇文章主要介绍了说说C#的async和await的具体用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
关于async和await的一些误区实例详解
09-04
主要介绍了关于async和await的一些误区实例详解,有助于更加深入的理解C#程序设计,需要的朋友可以参考下
async await练习随笔
mo_jiu的博客
08-30 288
(function(){ /* async function timeout(){ return "hello async"; } timeout().then(result => { console.log(result); }) //conso...
async 与 await 的用法详解
weixin_60886885的博客
04-25 731
使得 await 得到了返回结果，再往后就继续同步的输出了 4，但是输出 5 的代码是异步任务，与输出 1、2 的代码一并放入任务队列，此时由于 await 返回了结果，所以可以执行 await 以外的代码了，输出 6 是异步任务，于是先输出了同步任务的 7，同步任务都执行完了，最后执行任务队列中的异步任务，按之前进入队列的顺序，就是依次输出 1、2、5、6，所有代码运行结束；会等到返回结果再继续执行下去，也就是说，非 await 部分仍然会以正常的异步或同步方式执行，例如遇到。
Javascript——async、await详解
最新发布
weixin_43551242的博客
01-15 4345
async、await
Async和Await
MXC17692370773的博客
10-05 183
async async 是异步的简写 ，async用于声明一个异步的 function await await 可以认为 async wait的简写 await 用于等待一个异步方法执行完成 特点 1. async 的作用 ，它作为一个关键字放到函数前面，这样普通函数就变成了异步函数 2. 异步async 调用 和普通函数的使用方式一样 3. 异步async函数返回一个promise对象 4. async 函数配合 await使用关键字使用（阻塞代码...
async/await的基础用法
Kimser
03-24 2767
一、async/await的优点 1）方便级联调用：即调用依次发生的场景； 2）同步代码编写方式： Promise使用then函数进行链式调用，一直点点点，是一种从左向右的横向写法；async/await从上到下，顺序执行，就像写同步代码一样，更符合代码编写习惯； 3）多个参数传递： Promise的then函数只能传递一个参数，虽然可以通过包装成对象来传递多个参数，但是会导致传递冗余信息，频繁的解析又重新组合参数，比较麻烦；async/await没有这个限制，可以当做普通的局部变量来处理，用let或
async和awit
qq_36142428的博客
04-24 696
1、async和awit两种方法结合可以让异步代码像同步代码一样 2async函数 1）async函数的返回值为promise对象 2）promise对象的结果由async函数执行的返回值决定 2await表达式 1）必须写在async函数中 await 必须写在 async 函数中, 但 async 函数中可以没有 await 如果 await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 来捕获处理 await 返回的是promise成功的.
理解async与await
qq_41884544的博客
05-07 6823
1. async和await是什么 async可以理解为generate的语法糖，async是异步的意思，用来声明一个函数是异步的。 await是等待的意思，顾名思义，它是用来等待某个动作的完成。 注： (1) await不是用来调用async函数的，async函数的调用与普通函数调用没有区别。 (2)await只能写在async函数中，不能写在别处。 2.async起什么作用 (1)我们来看一段代码 async function fun1() { return "hello"; } let res
async和await的区别
dtfygewr的博客
11-03 1976
async和await,异步加载，promise
说说C#的async和await
热门推荐
许耀驰的博客
12-30 18万+
C# 5.0中引入了async 和 await。这两个关键字可以让你更方便的写出异步代码。 看个例子： public class MyClass { public MyClass() { DisplayValue(); //这里不会阻塞 System.Diagnostics.Debug.WriteLine("MyClass() End."); } public Task G
async 和 await
07-28
async 和 await 是 JavaScript 中用于处理异步操作的关键字。它们通常一起使用，以简化异步代码的编写和理解。 async 函数是一个特殊的函数，它返回一个 Promise 对象。在 async 函数内部，可以使用 await 关键字来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值