使用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

}

问题解决

通过将方法改为并行执行，我们解决了以下问题：

1. 性能瓶颈：原来的同步执行方式可能导致性能瓶颈，特别是在处理大量数据或网络请求时。并行执行可以提高性能，减少整体执行时间。
2. 并行性：通过并行执行，我们确保了这三个方法可以同时开始执行，而不需要等待上一个方法的执行结果。这提高了并行性，有助于提高系统的吞吐量和响应速度。

三、异步改成同步（补充）

情景：在methods的某个方法内，想要在获取到接口数据后，在进行大量的逻辑书写（或者再调用下一个接口方法），原始方案就需要写成嵌套关系，形成回调地狱难以阅读。

修改前：执行顺序是2-4-3，逻辑赋值只能在3的位置书写，

    // 获取申请人信息
    getApplyUserList() {
      console.log(2)
      applyUserApi({}).then(res => {
        this.divisionList = res || []
        this.getPageList() // 嵌套调用获取页面数据接口
        console.log(3)
      }).finally(() => {
      })
      console.log(4)
    },

修改后：执行顺序是 1-2-3-4-5，可以在4的位置书写大量逻辑赋值等操作

  async created() {
    console.log(1)
    await this.getApplyUserList() // 可以 let data = await this.getApplyUserList()方法内的return数据
    console.log(5)
  },
   
	 // 获取申请人信息
    async getApplyUserList() {
      console.log(2)
      try {
        this.divisionList = await applyUserApi({})
        // return 可以return出await接口数据
        console.log(3)
      } catch (error) {
        console.log(error)
      }
      this.getPageList() // 依次执行的更清晰
      console.log(4)
    },

总结：可以理解为，设置async 和 await 后， 该方法{}内是同步逻辑

结论

通过将方法从同步执行改为并行执行，我们解决了性能瓶颈和并行性的问题，提高了系统的性能和响应速度。这种修改对于处理大量数据或网络请求的场景特别有帮助。

---