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的使用规则：

1. async和await要一起用；
2. async 表示这是一个async函数， await只能用在async函数里面，不能单独使用；
3. async 返回的是一个Promise对象，await就是等待这个promise的返回结果后，再继续执行；
4. 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