VUE获取Promise对象中PromiseResult中的数据(最新推荐)
VUE 项目中 如何获取Promise对象中的PromiseResult中的数据
问题描述
如果想要在接口请求方法的外面拿到请求的结果，再做相关数据处理，往往我们拿到的却是一个Promise对象，案例如下：
methods: {
getInfoList(id) {
let list = [];
// 接口请求封装的方法
list = infoStore(id)
console.log('list :>> ', list);
}
}打印结果
可以看到，请求返回的值放在了Promise对象的PromiseResult中，但是直接取值又取不出来，这是因为：
Promise 简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果；
从语法上说， Promise 是一个对象，从中可以获取异步操作的消息；
所以想要直接获取到Promise对象的值，需要通过 async await 来获取
解决方案
通过 async await 来获取
async 用于申明一个function是异步的；而await则可以认为是 async await的简写形式，是等待一个异步方法执行完成的；
async/awiat的使用规则：
- async和await要一起用；
- async 表示这是一个async函数， await只能用在async函数里面，不能单独使用；
- async 返回的是一个Promise对象，await就是等待这个promise的返回结果后，再继续执行；
- await 等待的是一个Promise对象，后面必须跟一个Promise对象，但是不必写then()，直接就可以得到返回值；
async getShelfList(id) {
letlist = [];
list = await infoStore(id)
console.log('list :>> ', list);
}打印结果
总结
异步获取Promise对象的值还可以使用Promise对象的then方法，但是then方法是在接口请求对象的里面执行数据处理的操作
getShelfList(id) {
let list = [];
infoStore(id).then((res) => {
// res则为promise对象的返回的值，可以在then()方法里面做数据处理
list = res.data
})
}两个方法使用场景不一样，可按个人情况择优使用
以上是个人经验，希望对大家有所帮助！
更新
当使用 async await 来获取Promise对象的值的时候，正常函数里是没有问题，但是放在forEach()循环里面会报错，对于这个问题，请参考另外以下文章，此文中将详细介绍forEach循环中不能使用async await异步调用的原因，以及不同循环中的使用方法：
如何在 for/forEach/map 循环里面使用异步调用 async/await
到此这篇关于VUE 如何获取Promise对象中的PromiseResult中的数据的文章就介绍到这了,更多相关vue 获取PromiseResult中的数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue mixins提供了一个非常灵活的方式来分发Vue组件中的可复用功能,通过全局混入和局部混入,可以将预定义的方法、数据等混合到Vue组件中,这种技术可以简化代码,提高开发效率,并允许在不同组件间共享功能2024-09-09
在实际项目开发过程中，如果公共数据比较多我们会使用vuex做公共状态管理，但是在对浏览器进行刷新操作的时候，会导致vuex内的数据丢失，这种情况有些时候是没问题的，但是有的时候我们需要某些数据可以持久化的保存，这样就需要做对应的处理2023-01-01
这篇文章主要介绍了详解iview的checkbox多选框全选时校验问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
这篇文章主要为大家详细介绍了Vue列表页渲染优化的操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要为大家介绍了如何利用Vue3实现列表虚拟滚动效果，文中的示例代码讲解详细，对我们学习或工作有一定价值，需要的可以参考一下2022-04-04
vue3使用别名报错问题的解决办法(vetur插件报错问题)
最近在写一个购物网站使用vue,使用中遇到了问题,下面这篇文章主要给大家介绍了关于vue3使用别名报错问题的解决办法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了vue 表单验证按钮事件交由父组件触发的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
这篇文章主要介绍了Vuex模块化和命名空间namespaced的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-11-11
axios 实现post请求时把对象obj数据转为formdata
今天小编就为大家分享一篇axios 实现post请求时把对象obj数据转为formdata，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要给大家介绍了关于vue项目中按钮防抖处理实现的相关资料,在项目开发中相必大家时常会遇到按钮重复点击后引起事件重复提交的问题,需要的朋友可以参考下2023-08-08
最新评论