async和await

最新推荐文章于 2024-09-11 22:29:18 发布
最新推荐文章于 2024-09-11 22:29:18 发布
阅读量409 收藏
点赞数 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
关注
专栏目录
C#基础系列：异步编程初探async和await
12-22
确实，没有异步的多线程是单调的、乏味的，async和await是出现在C#5.0之后，它的出现给了异步并行变成带来了很大的方便。异步编程涉及到的东西还是比较多，本篇还是先介绍下async和await的原理及简单实现。 　了解...
async、await详解
Zheng_xinle的博客
09-07 8万+
一、async/await是什么？ 简而言之， async用于申明一个function是异步的； 而await则可以认为是 async await的简写形式，是等待一个异步方法执行完成的。 二、async和await的基础使用 async/awiat的使用规则: async 表示这是一个async函数， await只能用在async函数里面，不能单独使用 async 返回的是一个Promise对象，await就是等待这个promise的返回结果后，再继续执行 await 等待的是一个Promise对象
async/await 的理解
最新发布
weixin_63681863的博客
09-11 199
用来实现同步的效果，其实就是语法糖，是为优化 then 链而开发出来的。从字面上来看，async 是“异步”的简写，await 则为等待，所以很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。当然语法上返回值是一个Promise对象await后面的代码相当于Promise.then 里面的代码，是微任务。
理解 JavaScript 的 async/await
hsany330的专栏
04-03 2523
随着Nodev7 的发布，越来越多的人开始研究据说是异步编程终级解决方案的 async/await。我第一次看到这组关键字并不是在 JavaScript 语言里，而是在 C# 5.0 的语法中。C# 的 async/await 需要在 .NET Framework 4.5 以上的版本中使用，因此我还很悲伤了一阵——为了要兼容 XP 系统，我们开发的软件不能使用高于 4.0 版本的 .NET F...
async与await
huihui_999的博客
10-24 6976
1.基本概念:async await号称异步的终极解决方案，async await之后再无回调. 2.基本使用: async用于修饰一个函数, 表示一个函数是异步的. 如果async函数内没有await, 那么async没有意义的, 全是同步的内容. 只有遇到了await开始往下, 才是异步的开始. 我们用代码分析一下: ...
浅谈C#中的Async和Await的用法详解
12-31
众所周知C#提供Async和Await关键字来实现异步编程。在本文中，我们将共同探讨并介绍什么是Async 和 Await，以及如何在C#中使用Async 和 Await。 同样本文的内容也大多是翻译的，只不过加上了自己的理解进行了相关...
说说C#的async和await的具体用法
08-29
C# async 和 await 的具体用法 C# 5.0 中引入了 async 和 await 两个关键字，这两个关键字可以让开发者更方便地编写异步代码。async 和 await 的出现使得异步编程变得更加简单易懂。 async 关键字 async 关键字...
关于async和await的一些误区实例详解
09-04
async和await是C#编程中用于实现异步编程的关键特性，它们经常被误解，尤其是在与多线程和并发处理的概念混淆时。本文将通过实例详细解释这些常见的误区，帮助开发者更深入地理解C#程序设计。 首先，我们要明确...
async 和await
Andrewniu的博客
03-13 166
转载自：https://www.cnblogs.com/liangxiaofeng/p/5853266.html 这个是.NET 4.5的特性，所以要求最低.NET版本为4.5。 看很多朋友还是使用的Thread来使用异步多线程操作，基本上看不见有使用Async、Await进行异步编程的。各有所爱吧，其实都可以。只要正确使用就行，不过还是写了这篇文章推荐大家使用Async、Await。 ...
async/await 的理解和用法
热门推荐
qq_42941302的博客
10-23 16万+
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
wu1737149371的博客
03-19 230
ES2017 标准引入了 async 函数，使得异步操作变得更加方便。 async 函数是什么？一句话，它就是 Generator 函数的语法糖。 一个函数如果加上 async ，那么该函数就会返回一个 Promise async function test() { return "1"; } console.log(test()); // -> Promise {<resolved&...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值