Vue.js 中 `console.log(odds.value)` 未输出 `getOdds` 获取的数据：原因及解决方法

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { apiGetDogQd } from '@/api/dog_qd'
const url =  'server_api/getTravelData'
const urlOdds =  'server_api/getOdds/travel'

const dog_qd 	= ref([])
const odds 		= ref(0)
const status 	= ref(false)						// 用于阻止获取数据前渲染页面导致 undefine ['机场', '巴黎', '马尔代夫', '爱琴海', '冰岛', '威尼斯', '埃及']
const data 		= ref([]);
const total 	= ref({'机场':0,'巴黎':0,'马尔代夫':0,'爱琴海':0,'冰岛':0,'威尼斯':0,'埃及':0})
const totalNumber = ref([0,0,0,0,0,0,0])
const totalAll 	= ref(0);

const getData = () => {
	apiGetDogQd(url)
		.then(
			(response) => {
				//dog_total.value = response.data.total;
				dog_qd.value 	= response.data;
				console.log('获取数据成功');
				setTimeout(() => {
					getData();
				}, (10000))		// 10秒作为刷新间隔
			})
		.catch(
			(error) => {
				console.log(error);
	});
}
const getOdds = () => {
	apiGetDogQd(urlOdds)
		.then(
			(response) => {
				odds.value 	= response.data;
	console.log(odds.value);
				status.value 	= true;			// 获取到数据后才渲染
				setTimeout(() => {
					getOdds();
				}, (43200000))		// 43,200秒即12小时作为刷新间隔
			})
		.catch(
			(error) => {
				console.log(error);
	});
}

watch(dog_qd, async (newDog_qd, oldDog_qd) => {
	data.value = [];
	var dataLength = dog_qd.value.length <= 100 ? dog_qd.value.length : 100 + dog_qd.value.length % 20;
	var indexData = dog_qd.value.length - dataLength
	let dataTemp = dog_qd.value.slice(indexData)
	total.value = {'机场':0,'巴黎':0,'马尔代夫':0,'爱琴海':0,'冰岛':0,'威尼斯':0,'埃及':0}
	totalNumber.value = [0,0,0,0,0,0,0]
	totalAll.value = 0;
	for (var indexTmp = 0; indexTmp<dog_qd.value.length; indexTmp++){
		if (indexTmp >= indexData){
			if (indexTmp - indexData<20){
				// data.value[(indexTmp - indexData)%20] = [dataTemp[(indexTmp - indexData)].time.substring(11,16)+' '+dataTemp[(indexTmp - indexData)].name];
				data.value[(indexTmp - indexData)%20] = [(indexTmp+1)+' '+dataTemp[(indexTmp - indexData)].name];
			}else{
				// data.value[(indexTmp - indexData)%20].push(dataTemp[(indexTmp - indexData)].time.substring(11,16)+' '+dataTemp[(indexTmp - indexData)].name);
				data.value[(indexTmp - indexData)%20].push((indexTmp+1)+' '+dataTemp[(indexTmp - indexData)].name);
			}
		}
		totalAll.value += 1;
		switch(dog_qd.value[indexTmp].name){
			case '机场':
				total.value.机场 += 1;break;
			case '巴黎':
				total.value.巴黎 += 1;break;
			case '马尔代夫':
				total.value.马尔代夫 += 1;break;
			case '爱琴海':
				total.value.爱琴海 += 1;break;
			case '冰岛':
				total.value.冰岛 += 1;break;
			case '威尼斯':
				total.value.威尼斯 += 1;break;
			case '埃及':
				total.value.埃及 += 1;break;
		}
	}
	totalNumber.value[0] = (total.value.机场/totalAll.value*100).toFixed(1)+'%
	totalNumber.value[1] = (total.value.巴黎/totalAll.value*100).toFixed(1)+'%
	totalNumber.value[2] = (total.value.马尔代夫/totalAll.value*100).toFixed(1)+'%
	totalNumber.value[3] = (total.value.爱琴海/totalAll.value*100).toFixed(1)+'%
	totalNumber.value[4] = (total.value.冰岛/totalAll.value*100).toFixed(1)+'%
	totalNumber.value[5] = (total.value.威尼斯/totalAll.value*100).toFixed(1)+'%
	totalNumber.value[6] = (total.value.埃及/totalAll.value*100).toFixed(1)+'%
})


	getData();
	getOdds();

</script>
<p>可能是因为 <code>getOdds()</code> 函数在执行时可能出错了，导致 <code>odds.value</code> 没有正确赋值。建议在 <code>catch</code> 中加入 <code>console.log(error)</code> 来查看错误信息，以确定问题的具体原因。此外，也可以在 <code>watch</code> 中加入 <code>console.log(dog_qd.value)</code> 来查看 <code>dog_qd.value</code> 的变化情况，以确保 <code>getOdds()</code> 函数获取的数据能够正确地传递给 <code>odds.value</code>。</p>