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

Question

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>

Answer 1

因为请求执行需要时间，所以会先执行你下面打印的 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); //空数组
};