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

最新推荐文章于 2023-07-18 16:41:49 发布
最新推荐文章于 2023-07-18 16:41:49 发布
阅读量299 收藏 2
点赞数
分类专栏： vue学习笔记 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ouyicnm/article/details/120893878
版权

一.什么是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>

注意：

  • 当Promise中调用了resolve时，在Promise执行完成后会自动执行then中的方法
  • resolve中可以返回一个数据
  • then方法中传入一个函数，该函数可以有一个参数。该参数就是resolve中返回的数据

进阶练习：等待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>

效果如下：
在这里插入图片描述
注意：

  • 当Promise中同时出现resolve和reject时，then方法需要传入两个函数。第一个函数对应resolve，第二个函数对应reject

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>

效果如下：
在这里插入图片描述
注意：

  • 使用all方法同时处理多个异步方法时，只有所有方法都是resolve，才会执行then中对应resolve的方法。而只要有一个方法是reject就会触发reject对应的方法

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>

效果如下：
在这里插入图片描述

new nm个对象
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端笔记Vue项目day4(八）
czbkzmj的博客
09-18 541
async和 await async作为一个关键字放到函数前面 任何一个async函数都会隐式返回一个promise await关键字只能在使用async定义的函数中使用 ​ await后面可以直接跟一个 Promise实例对象 ​ await函数不能单独使用 async/await 让异步代码看起来...
vue 函数（三）：Promise函数
w_t_y_y的博客
09-13 8626
一、介绍： 通过打印可以看出Promise是一个构造函数，有all、reject、resolve、then、catch等方法。这样用Promise new出来的对象肯定就有then、catch等方法。 二、用法： created() { var p = new Promise(function (resolve, reject) { //做一些异步操作 setTimeout(function () { console.log('Promise执行.
Promise.resolve()的应用场景
weixin_43904993的博客
05-12 1139
需求：在一个列表页上方有筛选条件，通过选择类型搜索，有一个按钮点击打开弹框出现添加类型，添加完后列表页上方的类型list改变（条件：类型不能重复） 分析：既然过滤条件里面有列表，我们一开始就通过接口获取列表（或者点击下拉的时候调用，我们这里不做这么细），添加的时候不能重复即要对比之前的数据（这里要拿到最新的列表数据） <el-select class="from-box-input" placeholder="报告类型" filterable size="mini" clearable.
vue中promise小结
zrh012525的博客
08-14 377
Promise用法小结 什么是promise 含义：Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、 resolve这几个方法，原型上有then、catch等方法。 promise的特点（两个） （1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。 （2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有
最全Vue知识点（基础到进阶，覆盖vue3）
weixin_46837985的博客
06-08 600
点击上方“程序员黑叔”，选择“置顶或者星标”你的关注意义重大！作者/阿李卑斯 阅读本文需要3分钟声明：本篇文章纯属笔记性文章，非整体原创，是对vue知识的整理，对自...
vue-cli脚手架的.babelrc文件用法说明
10-14
`.babelrc` 文件是 Vue CLI 脚手架中的一个重要配置文件，用于定义 Babel 的转码规则和插件。Babel 是一个广泛使用的 JavaScript 编译器，它允许开发者使用 ES6+ 甚至实验性语言特性，然后将这些新特性转换为广泛...
challenging-vue-cli:挑战Vue.js（vue-cli）
03-06
挑战性的挑战项目设置yarn install编译和热重装以进行开发yarn serve编译并最小化生产yarn build运行单元测试yarn test:unit运行端到端测试yarn test:e2e整理和修复文件yarn lint自定义配置请参阅。
vue-js-bridge:Vue.js的vue-js-bridge
05-14
vue-webview-js-bridge 适用于Vue.js的WebviewJavascriptBridge插件 基于 （ios）， （android）开发 Promise封装，支持then要么async/await等方式 安装 纱： yarn add vue-webview-js-bridge npm： npm i vue-...
vue.js学习之vue-cli定制脚手架详解
01-19
前言 年初的时候公司的老后台系统实在难以维护和继续在其上开发了，因为这个系统被很多人写过页面，有前端有后端，...这篇文章来记录下和脚手架相关的改造，首先其实就是上了vue-cli来做，可是呢？由于预计项目会有很
vue.js之vue-cli脚手架的搭建详解
10-19
本篇文章主要介绍了vue.js之vue-cli脚手架的搭建详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript进阶（二十五）：Promise 详解
热门推荐
IT全栈 华强工作室
12-22 3万+
Promise意在让异步代码变得干净和直观，让异步代码变得井然有序。 Promise在设计上具有原子性，即只有三种状态：等待（Pending）、成功（Fulfilled）、失败（Rejected）。在调用支持Promise的异步方法时，逻辑变得非常简单，在大规模的软件工程开发中具有良好的健壮性。 （1）基本语法 创建Promise对象： 要想给一个函数赋予Promise能力，就要先创建一个Prom...
vue中Promise的用法
yinyujia123的博客
01-24 2880
promise是什么？ 1、主要用于异步计算 2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果 3、可以在对象之间传递和操作promise，帮助我们处理队列 为什么会有promise？ 为了解决处理回掉地狱 1.promise简单用法 function2(){ // 你的逻辑代码 return Promise.resolve(/* 这里是需要返回的数据*/) } function3(){ // 你的逻辑代码 return Promise.res
VUE Promise详解
sssssnmmm的博客
07-18 1693
Promise意在让异步请求逻辑代码变得干净、直观、井然有序。Promise在设计上具有原子性，即只有三种状态：等待（Pending）、成功（Fulfilled）、失败（Rejected在调用支持Promise的异步方法时，逻辑变得非常简单，在大规模的软件工程开发中具有良好的健壮性。
Promise原理及常用操作
xyx107的博客
02-19 1067
<script> let promise = new Promise((resolve, reject) => { reject()//可以传参,如：resolve(1111)，那么.then的response可以接受这个参数。reject(2222)，那么.catch的error可以接受这个参数。 } promise.then(response => { //调...
vue项目分析--vue里的$&Promise.resolve（）&install(Vue)&vue自定义指令&Vue.directive()&Vue.prototype
weixin_46045444的博客
10-15 865
文章目录vue里的$Promise.resolve（）install(Vue)vue自定义指令Vue.directive()的用法和实例Vue.prototype 最后从已有项目的url router分析每一个页面 #/dashboard是首页 所以组件在@/views/dashboard/index.vue 可以看到首页下面还有民主测评/dashboard/democratic-evaluation和问卷调查’/dashboard/questionnaire-investigation’两个页面，分别
vue3之promise
leveretz的博客
11-08 1525
vue3之promise
vue 基础 promise函数的使用
qq_45494569的博客
03-30 761
vue 基础 promise 1.promise基本使用 <script> new Promise((resolve,reject)=>{ setTimeout(()=>{ //成功 //收到data后把 data传递到then那 resolve('hello world')
Promise.resolve几种情况
whl0071的专栏
08-05 3924
Promise.resolve 几种写法，和用法
十二、Promise的学习笔记(Promise的基本使用、链式编程、all())
zep
02-01 654
一、认识Promise ES6中一个非常重要和好用的特性就是Promise 但是初次接触Promise会一脸懵逼，这TM是什么东西？ 看看官方或者一些文章对它的介绍和用法，也是一头雾水。 Promise到底是做什么的呢？ Promise是异步编程的一种解决方案。 那什么时候我们会来处理异步事件呢？ 一种很常见的场景应该就是网络请求了。 我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回。 所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数
Scripts available in tool-template-vue-cli@0.1.0 via `npm run-script`: serve vue-cli-service serve build vue-cli-service build && node modifyFile.js lint vue-cli-service lint
最新发布
07-21
根据你提供的信息，tool-template-vue-cli@0.1.0 通过 `npm run-script` 提供了三个可用的脚本： 1. `serve`：运行 `vue-cli-service serve` 命令。 该命令启动开发服务器，用于在开发过程中提供热重载和实时更新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值