如何在axios拿到数据的回调里输出mydata.datas可用,外部拿不到mydata.datas

vue3中reactive响应式问题,输出外层mydata有数据,输出mydata.datas为空。
在axios拿到数据的回调里输出mydata.datas可用,外部拿不到mydata.datas。在vue的开发者工具中是能看到数据的,就是真正用的时候有时候可以用上,但刷新之后就报undefined了
<script setup>
import { reactive } from "@vue/reactivity";
import request from "../../utils/request";

const mydata = reactive({
  datas: {},
});

const getdata = () => {
  request({
    method: "get",
    url: "/img/all",
  }).then((res) => {
    mydata.datas = res;    //配置了res = res.data
    console.log(mydata.data); //输出的数据可用 
  });
  console.log(mydata.datas); //空数组
};
getdata();
mydata;
</script>

因为请求执行需要时间,所以会先执行你下面打印的 console.log(mydata.datas); //空数组,
改成这样试一下,

const getdata = async() => {
 await request({
    method: "get",
    url: "/img/all",
  }).then((res) => {
    mydata.datas = res;    //配置了res = res.data
    console.log(mydata.data); //输出的数据可用 
  });
  console.log(mydata.datas); //空数组
};

img

img

request({}) 前加上 await 同步调用即可。

先去看看js事件循环。基础学好先,事件循环我写了一篇可以参考一下

因为程序是先执行的最后一句日志输出,里面的异步请求还没赋值完成呢