JS（浅谈promise、async、await）

最新推荐文章于 2023-08-03 17:20:54 发布

@皮皮榴

最新推荐文章于 2023-08-03 17:20:54 发布

阅读量562

点赞数 1

分类专栏： javaScript提升 Javascript基础 Vue 文章标签： js javascript ajax

本文链接：https://blog.csdn.net/qq_39357822/article/details/106750556

版权

Vue 同时被 3 个专栏收录

35 篇文章 0 订阅

订阅专栏

Javascript基础

31 篇文章 1 订阅

订阅专栏

javaScript提升

16 篇文章 0 订阅

订阅专栏

直接上代码

初识promise

在这里插入图片描述
附上代码

<script>
         //1.创建promise实例对象
         //2.promise涉及到状态的改变  三个状态  pending（响应中） fulfilled(成功) rejected(失败) 只有两种变化形式 pending->fulfilled  pending->rejected 如果状态一旦发生变化，就凝固了，不再有其他的变化
         var promise = new Promise(function(resolve,reject){
                //resolve(1);//表示响应成功
                reject(2);//表示响应失败
         });
         //3.then方法 实现链式的调用  then方法里放一个函数，这个函数就是对应着之前的成功时回调函数
         /* promise.then(function(){
             console.log("aa");
         }); */

         //4.then方法里还可以放第二个参数，这个参数也是一个函数，这个函数对应的是之前失败的回调函数

         /* promise.then(function(){
            console.log("成功");
         },function(){
             console.log("失败");
         }) */
         //5.catch方法 只表示失败
         /* promise.then(function(a){
             console.log(a);
            console.log("成功");
         }).catch(function(b){
             console.log(b);
             console.log("失败");
         }) */
    </script>

代码优化

在这里插入图片描述
附上代码

    <script>
        function timeout(interval){
            return new Promise((resolve,reject)=>{
                setTimeout(resolve,interval);
         })
        }

        timeout(2000)
        .then(()=>{
            //执行的代码 相当于一个回调函数

            return timeout(1000);
        }).then(()=>{
             //执行的代码 相当于一个回调函数

             return timeout(3000);
        }).then(()=>{
            //执行的代码 相当于一个回调函数
            
        })
    </script>

promise结合ajax

<!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 ajax(url){
            return new Promise(function(resolve,reject){
                if(window.XMLHttpRequest){
                    var xhr = new XMLHttpRequest();
                }else{
                    var xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhr.open("get",url,true);
                xhr.send();
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4){
                        if(xhr.status == 200){
                            var data = xhr.responseText;
                            resolve(data);
                        } else{
                            reject("请求失败");
                        }
                    }
                }
            })  
        } 
        
        ajax("data.json").then((data)=>{
            //针对于第一个ajax请求的回调函数
            console.log(data);

            return ajax("data2.json");
        }).then((data)=>{
            //针对于第二个ajax请求的回调函数
            console.log(data);

            return ajax("data3.json");
        }).then((data)=>{
            //针对于第三个ajax请求的回调函数
            console.log(data);
        })
    </script>
</body>
</html>

回调地域的终极解决方案

async与await
在这里插入图片描述
简单了解下语法

使用async、await

 <script>
        //await 后通常跟的是promise 并且要放到 async 函数里
        function timeout(x,interval){
            return new Promise((resolve,reject)=>{
                //setTimeout(resolve,interval);
                setTimeout(function(){
                    resolve(x); //这个参数会给到 await 赋的那个值
                },interval)
         })
        }
        function foo1(){
            return timeout("a",2000);
        }
        function foo2(){
            return timeout(1000);
        }

        function foo3(){
            return timeout(3000);
        }

        async function bar(){
            var f1 = await foo1();//f1就对应resole小括号里的值
            console.log(f1);
            console.log("开始");
            var f2 = await foo2();
            console.log("进行");
            var f3 = await foo3();
            console.log("完成");           
        }

        bar();    
    </script>

promise.all与promise.race

在这里插入图片描述
附上代码

 <script>
        //all  race 都是Promise这个构造函数的方法 
        //then catch 都是Promise实例的方法   
        function timeout(interval){
            return new Promise((resolve,reject)=>{
                setTimeout(resolve,interval);
         })
        }
        var p1 = timeout(1000);
        var p2 = timeout(3000);
        var p3 = timeout(5000);

        //all 所有的异步操作都完成时，才去执行then方法，以耗时长的为准
        Promise.all([p1,p2,p3]).then(()=>{
            console.log("所有都完成时要执行的代码");
        })

        //race 只要一个异步操作完成，就去执行then方法，以耗时短的为准
        Promise.race([p1,p2,p3]).then(()=>{
            console.log('只要有一个完成，就去执行的代码');
        })
    </script>

@皮皮榴

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS（浅谈promise、async、await）

直接上代码初识promise附上代码<script> //1.创建promise实例对象 //2.promise涉及到状态的改变三个状态 pending（响应中） fulfilled(成功) rejected(失败) 只有两种变化形式 pending->fulfilled pending->rejected 如果状态一旦发生变化，就凝固了，不再有其他的变化 var promise = new Promise(fun
复制链接

扫一扫