如何在 Vue.js created/mounted 钩子中操作并加载异步数据？

Question

这是方法体

这是在created调用这个方法

问题：
通过这个方法获取的数据，我在这个方法的.then后面进行console对res.rows进行输出时，数据是存在的。
将这个Patientdata变量加载进页面时 数据也是存在的。
但是我现在想在created或者是mounted对Patientdata数据进行操作后再加载进页面内，在写操作数据的方法时，发现怎么都获取不到Patientdata的值，都是为空 这是为什么？

Answer 1

方法体：

patientListData() {
    return new Promise((resolve, reject) => {
        //处理逻辑
        resolve()
    }).catch(...)
}

// created方法
async created() {
    ...
   await patientListData()
}

Answer 2

async/await异步问题。
create请求接口全部转同步执行即可

async created(){
this.listData = listData
// this.listDataFor(this.listData)//对数据进行处理 实现表格同类合并
await this.getPatitentInfectData()
await this.patientlistData()
await this.HospitalListDate()
console.log(this.PatientData,this.InHospitalDate)
console.log(this.merge0bjectsById(this.PatientData, this.InHospitalDate))
}

Answer 3

渲染的数据处理可以使用 computed 来计算，这样你依赖的数据回来之后 table 数据就会自动变更了。

或者把你的两个异步请求数据使用 Promise.allSettled() 包裹起来，在里面做处理和 loading 关闭。

Answer 4

比较不优雅的解决方法：在mounted内对数据进行操作。并且让mounted()等待一秒（等待created异步获取数据完成）后在执行。

但是这种方法不太优雅。因为我们不知道异步获取数据的时间，等待的时间也就难以设置。
有没有什么优雅一点的方法。

Answer 5

不是写在后面就是后执行，要看是同步代码还是异步代码。

你的两个数据请求是异步请求，数据的赋值操作是等请求结束再进行赋值的，如果请求时间为半分钟，那就是半分钟才会进行数据的赋值。而你created中的代码是同步代码，执行完请求这一动作后就立即执行console.log了，他不会等半分钟后数据请求到了再打印。

你可以使用Promise.all相关api将两个请求都执行结束再进行console.log及合并操作，或者使用async/await修饰你的请求函数及created