vue关于Promise的使用方式
更新时间：2024年06月18日 09:09:25 作者：曾令胜
这篇文章主要介绍了vue关于Promise的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
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)回调函数
使用实例
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)
})
}
输出
总结
- resolve —>对应then
- reject —>对应catch
另外，只有调用了resolve 或者reject 才会触发 then 和 catch
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Vue3中的Excel数据管理,即下载模板并导入数据功能的实现,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下2024-05-05
部分项目需要地图的嵌入，这篇文章主要介绍了vue项目中调用百度地图API使用方法，其他的地图调用与之类似，有需要的朋友可以借鉴参考下，希望能够有所帮助2022-04-04
vue中$nexttick,$set,$forceupdate的区别
本文主要介绍了vue中$nexttick,$set,$forceupdate的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
这篇文章主要介绍了VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法,结合实例形式详细分析了VUE使用JS修改html对象的值导致没有更新到数据的原因与解决方法,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了Vue mergeProps用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
这篇文章主要为大家介绍了Vue3必学技巧-自定义Hooks-让写Vue3更畅快示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
下面小编就为大家分享一篇vue axios 表单提交上传图片的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家介绍了Vue-cli来构建Vue项目的步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Vue和React中快速使用Electron的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
距离 Vue 3.0 正式版发布已经有一段时间了,关于vue3组件库相关的问题还是挺多人感兴趣的,这篇文章主要给大家介绍了关于vue3如何按需加载第三方组件库的相关资料,需要的朋友可以参考下2021-06-06
最新评论