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