<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); //空数组
};
request({}) 前加上 await 同步调用即可。
先去看看js事件循环。基础学好先,事件循环我写了一篇可以参考一下
因为程序是先执行的最后一句日志输出,里面的异步请求还没赋值完成呢