async和await

原代码

useEffect(() => {
  getStatioList().then((res) => {
    setStatioList(res.data);

    // 在获取电站列表数据后再执行下面的操作
    getFirstChart({
      data1: "0",
      data2: "-2",
      data3: 'p'
    });

    getTableDetail({
      data1: "0",
      data2: "-2",
      data3: 'p'
    }).then((res) => {
      setTotal(res.data.total)
      setTableData(res.data.data)
    });
  });
}, []);  // 仍然保留空依赖数组以确保只在组件挂载时执行

改后

useEffect(() => {
  const fetchData = async () => {
    try {
      // 方法一
      const stationListRes = await getStatioList();
      setStatioList(stationListRes.data);

      // 方法二
      const firstChartRes = await getFirstChart({
        data1: "0",
        data2: "-2",
        data3: 'p'
      });

      // 方法三
      const tableDetailRes = await getTableDetail({
        data1: "0",
        data2: "-2",
        data3: 'p'
      });

      setTotal(tableDetailRes.data.total);
      setTableData(tableDetailRes.data.data);
    } catch (error) {
      // 处理错误
      console.error('Error:', error);
    }
  };

  fetchData();
}, []);  // 仍然保留空依赖数组以确保只在组件挂载时执行

将 getStatioList、getFirstChart 和 getTableDetail 封装在 fetchData 异步函数中，使用 await可以确保它们按顺序执行。然后，在第一个 useEffect 中调用 fetchData()