vue 中 Promise 使用方法
1. Promise 基本概念:
Promise是一个构造函数,所以可以 new 出一个Promise的实例;
在Promise上有两个函数 resolve (成功之后的回调函数)和 reject (失败后的回调函数);
在Promise构造函数的prototype属性上,有一个 .then() 方法。
所以只要是Promise构造函数创建的实例,都可以访问到 .then()方法;
Promise表示一个一步操作,每当我们new一个Promise的实例,这个实例就代表具体的 异步 操作。
Promise创建的实例,是一个异步操作,这个异步操作结果,只有两种结果:
状态1:异步执行 成功,需要在内部调用成功的回调函数resolve把结果返回给调用者
状态2:异步执行 失败,需要在内部调用失败的回调函数reject把结果返回调用者
由于Promise的实例是一个异步操作,所以内部拿到操作结果后,无法使用return把操作结果返回给调用者 ,
这个时候只能使用 回调函数 的形式,把成功或失败的结果,返回给调用者,具体:
我们可以在new出来的Promise实例上,调用 .then()方法,预先为这个Promise异步操作,指定成功(resolve)和失败(reject)回调函数。
2.使用实例
store.js的actions中添加increment方法。测试reject的使用方法。
increment (context) {return new Promise((resolve, reject) => {setTimeout(() => {reject(new Error('2222222'))}, 1000)})}
调用increment
handleActionDecrease () {this.$store.dispatch('increment').then((data) => {console.log(data)console.log(this.$store.state.count)}).catch((error) => {console.log(error)})}
返回结果为
store.js的actions中添加increment方法。测试resolve的使用方法。
increment ({ commit }) {return new Promise((resolve, reject) => {setTimeout(() => {resolve("1111")reject(new Error('2222222'))}, 1000)})},
调用
handleActionDecrease () {this.$store.dispatch('increment').then((data) => {console.log(data)console.log(this.$store.state.count)}).catch((error) => {console.log(error)})}
输出
3、总结
resolve —>对应then
reject —>对应catch
另外,只有调用了resolve 或者reject 才会触发 then 和 catch
vue 中 Promise 使用方法相关推荐
- keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处 在做电商有关的项目中 ...
- vue 给标签添加data属性_在Vue中获取自定义属性方法:data-id的实例
获取自定义属性的方法: 第一步:首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面 第二步:在标签上继续绑定:date-id = ...
- h5调起app的方法;app调起vue中的某个方法
h5调起app的方法 window.fuXinJSBridge.personSuccess(par) // par 为参数:personSuccess双方约定的方法名 app调起vue中的某个方法 / ...
- Vue 中CodeMirror使用方法
2021的Vue 中CodeMirror使用方法. 1.包括项目的安装 .官网地址. package.json信息 2.基本使用:引入方法.参数注释.案例 2018的Vue-CodeMirror. 1 ...
- vue中如何在方法中动态的删除集合中的元素!?
参考https://blog.csdn.net/weixin_42230550/article/details/87990486 vue中,如何在方法中动态的删除集合中的元素? me.btn_elem ...
- 如何在vue中设置全局方法
//js文件部分(可适用于各种js中function方法,不仅仅只有请求) //export 导出方法 export function getDicts(dictType) {return reque ...
- vue中Promise的用法
简介 promise是什么,它可以说是异步编程的一种解决方法,就拿传统的ajax发请求来说,单个还好,如果是一个请求回来的数据还要被其他请求调用,不断地嵌套,可想而知,代码看起来是很乱的,promis ...
- Vue中的methods方法使用技巧,三分钟迅速读懂
1.methods方法应用场景: 在Vue中,我们需要调用某个方法时,我们需要先将这些方法定义在methods属性中,然后才能在vue 表达式中调用该方法. 2.methods方法的使用方法 语法定义 ...
- vue中使用html2canvas方法,设置背景,字体重叠问题解决方法
1.安装 npm install html2canvas --save 2.引入 import html2canvas from 'html2canvas' 3.在组件中使用的方法 createImg ...
最新文章
- 2022-2028年中国高阻隔片材基膜行业市场供需形势及前瞻分析报告
- 《Adobe AIR权威指南》——《Flex 3权威指南》作者新作
- [转]深刻理解Python中的元类(metaclass)
- Filter Effects - 使用 CSS3 滤镜处理图片
- sts从mysql数据库中反向生成实体类
- linux sqlserver_SQLServer和Oracle数据库相比谁更强?
- ASP.NET Core Web API 与 SSL
- ASP.NET Core Razor页面禁用防伪令牌验证
- 在实际使用中 mysql所支持的触发器有_2016计算机二级MySQL冲刺题及答案
- SX1280抗WIFI强干扰电磁环境能力解析
- 软件项目立项书_2019年度上海市软件和集成电路产业发展专项资金项目立项
- python中split啥意思_python中split的用法详解_后端开发
- 鸿蒙硬件HI3861-I2C-MCP23017
- 苹果mac窗口速调辅助工具:Magnet
- 【转】NodeJs使用Mysql模块实现事务处理
- 小米android11账号补丁,小米10 MIUI11 解账户锁 可登小米账号 永不反锁 完美ROOT 解锁包...
- 解决xShell4某些情况下按删除键会输出^H的问题
- 【桌面运维转网络要做什么准备,高级网工学习路线分享】
- C语言之二维数组定义、初始化、赋值、求最大最小、求和
- 学习costmap代价地图
热门文章
- 【Spring Security】如何实现多设备同一时间只允许一个账号登录(即前登录用户被后登录用户挤下线)?只需简单两步!
- java打印文件树的代码
- Linux Sort 用法
- 表单验证--12306注册账号页面
- 完美解决序微信小程序不能用本地ip调试的问题,不在以下 request 合法域名列表中,请参考文档:https://d
- indexOf()的定义和用法
- WPS——excel单元格格式设置笔记(小白)
- CogIPOneImageTool工具 图像处理工具
- js之- 简解Promise的resolved,rejected,Promise.all 和Promise.race(知识记录)
- 5.10杂谈正能量日记