前端 异步请求数据 时机 以及 如何初始化

当用全局状态管理渲染用到的数据时，一开始数据还没有请求回来，此时具体组件里用到数据的某些属性就是会报错的，在数据未返回时，设置状态为loading，然后把dom结构替换成骨架屏，以免访问到不存在的数据；数据请求·返回之后，更改状态为finished，同时在组件内部监听这个状态变化（因为数据初始化一般是在setup函数内，也就是create函数内，所以最开始loading状态的时候不应该赋值给data，而是应该监听这个状态的变化，一旦发送变化，即代表数据以及返回，可以访问数据，此时再将数据赋值给data）。同时，还要理清楚异步函数的处理，搞清楚aync，await，promise，then等概念。

export const useRequstStore = defineStore('requestStore', () => {
  // States
  const session = ref({});
  const requestData = ref({}); 
  const overviewStats = ref({}); //需不需要存？
  const overviewData = ref([]);
  const insightData = ref({});
  const insightStats = ref({});
  const insightSummary = ref({});
  // Getters
  const getData = () => {
    return {
      session,
      requestData,
      overviewStats,
      insightStats,
      overviewData,
      insightData,
      insightSummary
    };
  };
  // Actions
  const onRequestOverviewData = async () => {
    let iniData = await initialization('wps-id', xlsx, 'v3');
    resSession = iniData.resSession;
    resData = iniData.resData;
    session.value = resSession.data.session_id
    requestData.value = resData.data
    session.value = resSession.data.session_id
    requestData.value = resData.data

    resOverviewStats = await getOverviewStats(
      session.value,
      requestData.value.metrics.chosen
    );
    resOverviewData = await getOverviewData(
      session.value,
      resOverviewStats.data.stats_id
    );

    overviewData.value = resOverviewData.data;
 //metircs,deension,date,funnel_stages
    overviewStats.value = resOverviewStats.data.stats_id; //需不需要存？
    
  };
  const onRequestInsightData = async () => {
    console.log(requestData.value.dimensions.chosen);
    let stats=await getDimensionStats(
      session.value,
      requestData.value.dimensions.chosen
    );
    insightStats.value = stats.data.stats_id
    let resInsightData = await getInsightData(session.value,insightStats.value)
    insightData.value = resInsightData.data.insights
  };
  const onRequestSummaryData = async ()=> {
    let summary = getInsightSummary(session.value,insightData.value,requestData.value.metrics.chosen,requestData.value.dimensions.chosen)
    insightSummary.value = summary.data.insights
  }
  return { getData, onRequestOverviewData,onRequestInsightData,onRequestSummaryData};
});

    onRequestOverviewData().then(() => {
      chosenMetrics = requestData.value.metrics.chosen;
      altMetrics = requestData.value.metrics.alternatives;
      stats = overviewStats.value;
      metricsData = overviewData.value;
      console.log(chosenMetrics,altMetrics,overviewData);
      onChangeOverViewStatus(2);
      onRequestInsightData().then(()=>{
        onChangeAnalysisStatus(2)
        onRequestSummaryData().then(()=>{
          onChangeConclusionStatus(2)
        })
      })
      console.log(111);
    });
  }

watch(
    () => conclusionStatus.value,
    (value, oldValue) => {
     if(value===2) {
      insights = insightSummary.value
     }
    }, {immediate:true}
  )