钩子函数onMounted定义了太多访问MySQL的操作 导致数据库异常

先放几种后端遇到的异常，多数和数据库有关

pymysql.err.InternalError: Packet sequence number wrong - got 102 expected 1
127.0.0.1 - - [09/May/2024 17:49:37] "GET /monitorLastTenList HTTP/1.1" 500 

AttributeError: 'NoneType' object has no attribute 'read'
127.0.0.1 - - [09/May/2024 17:49:37] "GET /alarmTotal HTTP/1.1" 500 -

使用pymysql报错err.ProgrammingError: execute() first

异常代码如下：

onMounted(() => {// getList();// getPeopleTotal().then(({ data }) =>{//   // 更新人数总量//   peopleTotal.value = data.total;// })getPeopleTotal().then(response => {// 打印请求返回的数据console.log('Total people count:', response.data);// 更新人数总量peopleTotal.value = response.data.total;}).catch(error => {console.error('Error fetching total people count:', error);});getJieKouTotal().then(response => {// 打印请求返回的数据console.log('Total JieKou count:', response.data);// 更新调用接口总量jieKouTotal.value = response.data.total;}).catch(error => {console.error('Error fetching total JieKou count:', error);});getTimeTotal().then(response => {// 打印请求返回的数据console.log('Total Time count:', response.data);// 更新时间总量timeTotal.value = response.data.total;}).catch(error => {console.error('Error fetching total Time count:', error);});getAlarmTotal().then(response => {// 打印请求返回的数据console.log('Total alarm count:', response.data);// 更新预警总量alarmTotal.value = 100;}).catch(error => {console.error('Error fetching total alarm count:', error);});getMonitorLastTenList().then(response => {// 打印请求返回的数据console.log('Total monitor count:', response.data);// 更新监控总量monitordataList.value = response.data.dataList;// 更新车流量预警统计图表数据carFlow.series[0].data = monitordataList.value;}).catch(error => {console.error('Error fetching total monitor count:', error);});getClassList().then(response => {// 打印请求返回的数据console.log('Total class count:', response.data);// 更新监控总量carCount.value = response.data.dataList[0];busCount.value = response.data.dataList[1];vanCount.value = response.data.dataList[2];// 更新饼状图数据pieChartData = [{ value: carCount.value, name: '小汽车' },{ value: vanCount.value, name: '厢式货车' },{ value: busCount.value, name: '公交车' },];category.series[0].data = pieChartData}).catch(error => {console.error('Error fetching total class count:', error);});
})

修改毕设vue代码，很多知识已经忘掉了，全程和gpt一起找bug，最后也没问出来什么，分析了一下应该是同时访问数据库次数太多了，让gpt帮忙修改了一下。

我：怎么让这几个函数一个一个的执行，否则会经常数据库异常
gpt: 你可以使用 JavaScript 中的 Promise 链来确保这些函数按顺序执行，并在前一个函数执行成功后再执行下一个函数。下面是一个示例代码，展示了如何使用 Promise 链来实现：

onMounted(() => {getPeopleTotal().then(response => {console.log('Total people count:', response.data);peopleTotal.value = response.data.total;return getJieKouTotal(); // 返回一个 Promise 对象，使得下一个函数能够等待当前函数执行完毕后再执行}).then(response => {console.log('Total JieKou count:', response.data);jieKouTotal.value = response.data.total;return getTimeTotal();}).then(response => {console.log('Total Time count:', response.data);timeTotal.value = response.data.total;return getAlarmTotal();}).then(response => {console.log('Total alarm count:', response.data);alarmTotal.value = 100;return getMonitorLastTenList();}).then(response => {console.log('Total monitor count:', response.data);monitordataList.value = response.data.dataList;carFlow.series[0].data = monitordataList.value;return getClassList();}).then(response => {console.log('Total class count:', response.data);carCount.value = response.data.dataList[0];busCount.value = response.data.dataList[1];vanCount.value = response.data.dataList[2];pieChartData = [{ value: carCount.value, name: '小汽车' },{ value: vanCount.value, name: '厢式货车' },{ value: busCount.value, name: '公交车' },];category.series[0].data = pieChartData;}).catch(error => {console.error('Error fetching data:', error);});
});

完美解决！