AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

VUE学习笔记：27.脚手架vue-cli之promise

分类：Promise作者：编程之家原文地址

一.什么是Promise

在这里插入图片描述

在这里插入图片描述

二.Promise的使用

1.基本使用

（1）不使用Promise

我们使用定时器setTimeout来模拟异步操作，看看Promise的作用。

<!DOCTYPE html>
<html>
<head lang="en">
    <Meta charset="UTF-8">
    <title></title>
</head>
<body>


<script>
    //setTimeout：两个参数：1个是函数，另一个是时间毫秒。当设置的时间结束后，会自动调用函数
    setTimeout(function(){
        console.log("666");
    },2000)

</script>

</body>
</html>

效果如下：

在这里插入图片描述

（2）使用Promise

格式：

  • 创建一个Promise对象，并传入1个参数，该参数为一个函数。且该函数也有两个参数resolve, reject
let p = new Promise(function(resolve, reject){
		//做一些异步操作相关的代码
	});

案例：

<!DOCTYPE html>
<html>
<head lang="en">
    <Meta charset="UTF-8">
    <title></title>
</head>
<body>


<script>
    let p =  new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log("666");
        },2000)
    });

</script>

</body>
</html>

效果与上面的一样，在页面加载完2秒后打印"666"
注意：

  • 如果把Promise定义在最外层，当页面加载到对于代码时。会直接执行Promise
  • 如果把Promise定义在一个函数中，当函数调用时，会直接执行Promise
  • 我们一把都把Promise定义在函数中

2.resolve

前面我们讲了Promise需要传入一个函数作为参数，且该函数有resolve, reject两个参数。resolve可以简单的理解为Promise执行成功后的回调函数。
格式如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <Meta charset="UTF-8">
    <title></title>
</head>
<body>


<script>
    let p =  new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log("666");
            resolve("hahaha")
        },2000);
        
    });
    p.then(function(data){
        console.log(data);
    })

</script>

</body>
</html>

注意：

进阶练习：等待3秒打印666，再等待3秒打印777，再等待3秒打印888，再等待3秒打印999

<!DOCTYPE html>
<html>
<head lang="en">
    <Meta charset="UTF-8">
    <title></title>
</head>
<body>


<script>
    let myPromise = function(data){
        let p =  new Promise(function(resolve, reject){
            setTimeout(function(){
                console.log(data);
                resolve()
            },3000);
        });
        return p;
    };

    myPromise(666).then(function(){
        myPromise(777).then(function(){
            myPromise(888).then(function(){
                myPromise(999)
            })
        })
    })

</script>

</body>
</html>

效果如下：

在这里插入图片描述

从这个案例就可以看出Promise的强大了，它可以大大的简化我们的代码。更利于维护。

3.reject

reject与resolve的用法一样，不过它是表示Promise失败后的回调
案例：

<!DOCTYPE html>
<html>
<head lang="en">
    <Meta charset="UTF-8">
    <title></title>
</head>
<body>


<script>
    function myPromise(){
        let p = new Promise(function(resolve, reject){
            setTimeout(function(){
                var num = Math.ceil(Math.random()*20); //生成1-10的随机数
                console.log('随机数生成的值：',num)
                if(num<=10){
                    resolve(num);
                }
                else{
                    reject('数字太于10了即将执行失败回调');
                }
            }, 2000);
        })
        return p
    }

    myPromise().then(
            function(data){
                console.log('resolved成功回调');
                console.log('成功回调接受的值：',data);
            },
            function(reason){
                console.log('rejected失败回调');
                console.log('失败执行回调抛出失败原因：',reason);
            }
    );

</script>

</body>
</html>

效果如下：

在这里插入图片描述


注意：

4.catch的用法

与Promise对象方法then方法并行的一个方法就是catch,与try catch类似，catch就是用来捕获异常的。即捕获reject。如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <Meta charset="UTF-8">
    <title></title>
</head>
<body>


<script>
    function myPromise(){
        let p = new Promise(function(resolve, reject){
            setTimeout(function(){
                var num = Math.ceil(Math.random()*20); //生成1-10的随机数
                console.log('随机数生成的值：',num)
                if(num<=10){
                    resolve(num);
                }
                else{
                    reject('数字太于10了即将执行失败回调');
                }
            }, 2000);
        })
        return p
    }

    myPromise().then(
            function(data){
                console.log('resolved成功回调');
                console.log('成功回调接受的值：',data);
            }).catch (
            function(reason){
                console.log('rejected失败回调');
                console.log('失败执行回调抛出失败原因：',reason);
    });

</script>

</body>
</html>

注意：

  • then中的第二个函数和catch都是捕捉reject的。
  • 当then中的第一个函数执行出异常时，也会跳转到catch方法中
    如下：
    <!DOCTYPE html>
<html>
<head lang="en">
    <Meta charset="UTF-8">
    <title></title>
</head>
<body>


<script>
    function myPromise(){
        let p = new Promise(function(resolve, reject){
            setTimeout(function(){
                var num = Math.ceil(Math.random()*20); //生成1-10的随机数
                console.log('随机数生成的值：',num)
                if(num<=10){
                    resolve(num);
                }
                else{
                    reject('数字太于10了即将执行失败回调');
                }
            }, 2000);
        })
        return p
    }

    myPromise().then(
            function(data){
                console.log('resolved成功回调');
                console.log('成功回调接受的值：',data);
                console.log(nodata);

            }).catch (
            function(reason){
                console.log('rejected失败回调');
                console.log('失败执行回调抛出失败原因：',reason);
    });

</script>

</body>
</html>

5.all方法

  • all是跟then，catch同级的方法
  • all提供了同时处理多个异步方法的能力
  • all可以接受数组
<!DOCTYPE html>
<html>
<head lang="en">
    <Meta charset="UTF-8">
    <title></title>
</head>
<body>


<script>
    function myPromise1(){
        let p = new Promise(function(resolve, reject){
            setTimeout(function(){
                var num = Math.ceil(Math.random()*20); //生成1-10的随机数
                console.log('随机数生成的值：',num)
                if(num<=10){
                    resolve(num);
                }
                else{
                    reject('数字太于10了即将执行失败回调');
                }
            }, 2000);
        })
        return p
    };
    function myPromise2(){
        let p = new Promise(function(resolve, reject){
            setTimeout(function(){
                var num = Math.ceil(Math.random()*20); //生成1-10的随机数
                console.log('随机数生成的值：',num)
                if(num<=10){
                    resolve(num);
                }
                else{
                    reject('数字太于10了即将执行失败回调');
                }
            }, 2000);
        })
        return p
    };
    function myPromise3(){
        let p = new Promise(function(resolve, reject){
            setTimeout(function(){
                var num = Math.ceil(Math.random()*20); //生成1-10的随机数
                console.log('随机数生成的值：',num)
                if(num<=10){
                    resolve(num);
                }
                else{
                    reject('数字太于10了即将执行失败回调');
                }
            }, 2000);
        })
        return p
    };
    
    // 同时执行3个异步操作
    Promise.all([myPromise1(),myPromise2(),myPromise3()]).then(
            function(data){
                console.log('resolved成功回调');
                console.log('成功回调接受的值：',data);

            }).catch (
            function(reason){
                console.log('rejected失败回调');
                console.log('失败执行回调抛出失败原因：',reason);
            });

</script>

</body>
</html>

效果如下：

在这里插入图片描述


注意：

6.race方法

  • race与all一样都可以同时处理多个异步方法。
  • 但race执行哪个回调函数，取决于哪个异步方法先执行完。如果最先执行完成的异步方法是resolve的，则执行resolve的回调。如果最先执行完成的异步方法是reject的，则执行reject的回调。
<!DOCTYPE html>
<html>
<head lang="en">
    <Meta charset="UTF-8">
    <title></title>
</head>
<body>


<script>
    function myPromise1(){
        let p = new Promise(function(resolve, reject){
            setTimeout(function(){
                var num = Math.ceil(Math.random()*20); //生成1-10的随机数
                console.log('随机数生成的值：',num)
                if(num<=10){
                    resolve(num);
                }
                else{
                    reject('数字太于10了即将执行失败回调');
                }
            }, 2000);
        })
        return p
    };
    function myPromise2(){
        let p = new Promise(function(resolve, reject){
            setTimeout(function(){
                var num = Math.ceil(Math.random()*20); //生成1-10的随机数
                console.log('随机数生成的值：',num)
                if(num<=10){
                    resolve(num);
                }
                else{
                    reject('数字太于10了即将执行失败回调');
                }
            }, 2000);
        })
        return p
    };
    function myPromise3(){
        let p = new Promise(function(resolve, reject){
            setTimeout(function(){
                var num = Math.ceil(Math.random()*20); //生成1-10的随机数
                console.log('随机数生成的值：',num)
                if(num<=10){
                    resolve(num);
                }
                else{
                    reject('数字太于10了即将执行失败回调');
                }
            }, 2000);
        })
        return p
    };

    // 同时执行3个异步操作
    Promise.race([myPromise1(),myPromise2(),myPromise3()]).then(
            function(data){
                console.log('resolved成功回调');
                console.log('成功回调接受的值：',data);
            }).catch (
            function(reason){
                console.log('rejected失败回调');
                console.log('失败执行回调抛出失败原因：',reason);
            });

</script>

</body>
</html>

效果如下：

在这里插入图片描述

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

javascript – 使用mongoose进行Promise / async-await,返回空数组
最后的控制台返回空数组.控制台在ids.map函数完成之前运行varids=[];varallLync=[]varuser=awaitUser.findOne(args.user)ids.push(user._id)user.following.map(x=>{ids.push(x)})ids.map(asyncx=>{varlync=aw...
rxJava和promises之间的关系
我正在尝试将rxJava与我已经知道的内容联系起来,特别是来自JavaScript编程.rxJava的核心思想是否就像可观察者的承诺一样？解决方法:正如评论所解释的那样,承诺将允许您进行连锁操作,但最终,您将获得一个结果.使用RxJ...
微信小程序前端promise封装
config.jsconstconfig={base_url_api:"https://douban.uieee.com/v2/movie/",}export{config}http.jsimport{config}from"../config";classHTTP{requset({url,method="GET",data={}}){...
javascript – 回复承诺？
我正在阅读MDN中的javascript,并且遇到了这个谈论承诺并且不明白它意味着什么的部分.代码非常简单,但我不明白谨慎.回报承诺意味着什么？隐含地返回是什么意思？如果它是一个愚蠢的问题,请指向一些资源,我会将其标记为...
微信小程序前端promise封装
config.jsconstconfig={base_url_api:"https://douban.uieee.com/v2/movie/",}export{config}http.jsimport{config}from"../config";classHTTP{requset({url,method="GET",data={}}){...
我怎么在这里滥用C承诺和期货？
这是我的代码main.cpp：#include<string>#include<iostream>#include<future>intmain(){usingnamespacestd;autop=promise<string>();p.set_value("Hello,world.");autof=p.get_fu...
javascript – 按顺序排列的多个jQuery承诺
基本上我想要这个：functiondo_ajax_calls(...){vard=$.Deferred();$.ajax(args).done(function(){$.ajax(args).done(function(){$.ajax(args).done(function(){d.resolve();});});})returnd.promise();}但是ajax调
javascript – Promise不是构造函数
我正在尝试使用promise而是出现类型错误：Promise不是构造函数.这是承诺：varPromise=newPromise(function(resolve,error){for(varkeyinexcludeValues){/*someifs*/minVal=someVa
javascript – 如何一个接一个地解决承诺？
我怎么能一个接一个地解雇承诺呢？waitFor(t),是一个返回在t时间后解析的promise的函数.我希望能做的是：waitFor(1000)Thenwhenfinished,console.log('Finishedwaitof1000millis')thenwaitFor(2000)Thenwh...
测试Promise与Async/await的基本使用
想在项目中用,发现自己不是很熟promise基本使用基本使用-思路newPromise()返回了一个状态机一个完全无法被外界影响的状态机构造函数,传入一个函数,两个参数,分别是reslove,reject表示执行的回调函数,也就是.then(),....
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native