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

Question

这是方法体

这是在created调用这个方法

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

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