promise,async await的用法

<!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 摇骰子(猜测) {

            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    const n = 6 //parseInt(Math.random() * 6 + 1)
                    console.log('开始投了')
                    if (n > 3) {
                        if (猜测 === "大") {
                            console.log('第一个' + n)
                            resolve("好嗨哦")
                        } else {
                            console.log('猜错了,第一个摇出来是' + n)
                            reject("我是第一个输光了")
                        }
                    } else {
                        if (猜测 === "小") {
                            console.log('第二个' + n)
                            resolve("好嗨哦")
                        } else {
                            console.log('猜错了,第二个摇出来是' + n)
                            reject("我是第二个输光了")
                        }
                    }
                },0)
            })
        }
        //一,摇一个骰子
        //  (1)用普通的promise方法
        //  摇骰子("小").then(res => console.log(res),err => console.log(err))
         
        //   (2)用async方法
        // async function test(){
        //     try{
        //     let n = await 摇骰子("大") //await接收的就是.then里面的东西
        //     console.log('我赢了')
        //     }catch(error){ console.log('我输了')} //try{}就是包住then的东西再用catch接受reject的东西
        // }
        // test()
//-------------------------------------------------------------
        //二,同时摇两个骰子
        //  (1)用普通的promise方法
        // Promise.all([摇骰子("小"), 摇骰子("大")]).then(res => {
        //     console.log(res)
        // }, err => {
        //     console.log('终极' + err)
        // })
        //Promise.all里有Pro1,Pro2,Pro3,假如Pro2被reject了,它的err
        //会立即被传入Promise.all的catch里,而且Promise.all的catch会立即
        //执行。并且Pro3不会被忽略,也会按照自己的流程执行(比如有console.log,也还是会console.log出来)
        
        //Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时,成功和失败的返回值是不同的,成功的时
        //候返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值。
       
       //   (2)用async方法
       async function test2(){
           console.log('我会第一个执行吗')//会
          try {
              let res= await Promise.all([摇骰子('大'),摇骰子('小')])
              console.log(res) //res相当于then里的res 是数组
          }catch(err){
              console.log('终极'+err)
          }
          console.log('我会第二个执行吗')//不会 这个代码会等到await执行完了后才会执行
       }
       test2()
  
        for(let i = 0 ;i<4;i++){
            console.log('我会第三个执行吗'+i)
        }

       //总结: 1,async会比Promise看起来更像同步代码 2,(async function test(){})()会返回一个promise 
       //3,await必须且只能在async里使用 并且async的内部的await后面的函数必须等await的Promise函数执行完才会执行
       //如果await等的函数是一个异步函数的话,async会等外部的同步函数执行完了才会执行自己await的函数
    //如果await等的函数是同步函数的话 就按正常函数运行
    </script>
</body>

</html>

结果:


image.png

由此可知,await对代码执行顺序的影响:


image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容