使用Promise.all来并行调用多个异步函数；依次同步调用函数

场景： 在一个 vue页，有个form表单数据需要使用到三个后端接口返回的数据（常见的就是详情回显，需要下拉数据），要求拿到三个接口返回的数据后，再赋值给表单form。

总结：将方法从同步执行改为并行执行的过程

一、原始同步执行方式–依次执行–慢

在原始代码中，dictCode()、virtualMachineDataList()和serviceDataList()这三个方法调用后端数据被依次执行，即在一个方法的then中或await后调用下一个方法。这种同步执行方式可能导致性能问题，导致页面加载loading时间特别长，特别是在处理大量数据时，因为每个方法都需要等待上一个方法执行完成后才能开始执行。
修改前代码：

const dictCode = async(codeList) => {try {const data = await dictCodeList({ })return data} catch {return {}}
}const virtualMachineDataList = async() => {try {const data = await virtualMachineApi({ virtualMachineName: null })return data} catch {return {}}
}
const serviceDataList = async() => {try {const data = await serviceApi({ serviceName: null })return data} catch {return {}}
}const generateLayout = async(mode, activeNode, option) => {// 为了确保拿到三个接口数据 而依次执行（类似then嵌套）---导致lodaing加载过长const dictValueList = await dictCode(codeList) || []const hostList = await virtualMachineDataList() || []const serviceList = await serviceDataList() || []// 使用dictValueList、hostList、serviceList数据// 此时再使用dictValueList.map  hostList.map   serviceList.map  // 给form赋值 return form}

二、 `解决方案:`修改为并行执行

原三个方法不变动，我们只需将这三个方法放在了Promise.all中进行并行执行。这样可以确保这三个方法同时开始执行，而不需要等待上一个方法的执行结果。这样做可以显著提高性能，尤其是在处理大量数据或网络请求时。

Promise.all()提供了并行执行异步操作的能力。并且在所有异步操作执行完成以后，才执行回调。
Promise.all()详细使用方法参考此篇
修改后：通过network可以发现三个接口是同时调用的

const dictCode = async(codeList) => {try {const data = await dictCodeList({ })return data} catch {return {}}
}const virtualMachineDataList = async() => {try {const data = await virtualMachineApi({ virtualMachineName: null })return data} catch {return {}}
}
// 可以给第二个方法设置延时触发 更明显看到三个方法是并行执行效果
// const virtualMachineDataList = async() => {
//   return new Promise((resolve, reject) => {
//     setTimeout(async() => {
//       try {
//         const data = await virtualMachineApi({ virtualMachineName: null })
//         resolve(data)
//       } catch (error) {
//         reject(error)
//       }
//     }, 5000)
//   })
// } const serviceDataList = async() => {try {const data = await serviceApi({ serviceName: null })return data} catch {return {}}
}const generateLayout = async(mode, activeNode, option) => {// 并行调用三个异步函数--分别获取到三个接口返回的数据 参数数据和[]数组里调用方法返回的对应const [dictValueList, hostList, serviceList] = await Promise.all([dictCode(codeList),virtualMachineDataList(),serviceDataList()])// 使用dictValueList、hostList、serviceList数据// 此时再使用dictValueList.map  hostList.map   serviceList.map  // 给form赋值 return form}