vue3为什么请求在这边获取不到数据呢(关键词-select)

Question

import { reactive } from 'vue'
import axios from '@/axios/index'

export default function getclassRoomDatas() {
  interface ItemType {
    // 专用教室数
    count: number | string
    // 区域/学校
    name: number | string
    // 空间利用率
    spaceProportion: number
    // 日均使用率
    useProportion: number
  }

  const SourceClass = reactive<{
    ClassRoom: ItemType[]
  }>({
    ClassRoom: []
  })

  type MyType = number | string
  const getclassRoomData = (
    acadyear: MyType, //学年
    gradeCode: MyType, //年级
    regionCode: MyType, //区域
    schoold: MyType //学校
  ) => {
    axios({
      method: 'get',
      url: '/szxyTeachAffairs/classroom/resource/analysis',
      params: {
        acadyear,
        gradeCode,
        regionCode,
        schoold
      }
    }).then((res) => {
      console.log(res)
      SourceClass.ClassRoom = res.data
      console.log(SourceClass)  // 这个有数据
    })
  }

  return {
    SourceClass,
    getclassRoomData
  }
}

为什么请求在这边获取不到数据呢？

watch(
  () => [selectedAcadyear.value, selectedGrade.value, selectedRegion.value, selectedSchool.value],
  () => {
    if ((selectedAcadyear.value, selectedGrade.value, selectedRegion.value, selectedSchool.value)) {
      getclassRoomData(
        selectedAcadyear.value,
        selectedGrade.value,
        selectedRegion.value,
        selectedSchool.value
      )
    }
    console.log(SourceClass.ClassRoom, 111)  // 获取不到数据
  },
  { immediate: true, deep: true }
)

      <a-table :data-source="dataSource" :columns="SourceClass.ClassRoom" :pagination="false" />

造成表格无法渲染

Answer 1

1. 问题原因getclassRoomData是异步的,网络请求比较慢,先执行的console.log
2. 修改方案

   const getclassRoomData = (
    acadyear: MyType, //学年
    gradeCode: MyType, //年级
    regionCode: MyType, //区域
    schoold: MyType //学校
   ) => {
   return axios({
        method: 'get',
        url: '/szxyTeachAffairs/classroom/resource/analysis',
        params: {
            acadyear,
            gradeCode,
            regionCode,
            schoold
        }
    }).then((res) => {
        console.log(res)
        SourceClass.ClassRoom = res.data
        console.log(SourceClass)  // 这个有数据
    })
   }
   

   () => {
    if ((selectedAcadyear.value, selectedGrade.value, selectedRegion.value, selectedSchool.value)) {
        getclassRoomData(
            selectedAcadyear.value,
            selectedGrade.value,
            selectedRegion.value,
            selectedSchool.value
        ).then(()=>{
            console.log(SourceClass.ClassRoom, 111)
        })
    }
   }