巧妙运用异步操作：确保所有异步任务完成后再执行后续步骤
在使用 async/await 和 .then 处理异步操作时，如何确保所有异步任务完成后再执行后续步骤是一个常见挑战。本文将通过一个实际案例，详细讲解如何解决这个问题。
问题描述： 父组件循环调用子组件的 initfilepath 方法，该方法内部使用 async/await 进行网络请求和图片加载，并使用 .then 处理加载后的图片。由于 async/await 的特性，父组件的循环会继续执行，而不会等待所有子组件的异步操作（包括 dealimagedata 方法中的 Promise.all）完成。因此，需要一种机制来确保所有异步操作完成后，再执行后续操作。
原始代码： 父组件使用 forEach 循环调用子组件的 initfilepath 方法：
this.identifyfailed.forEach((alarm: Alarm, index: number) => {
this.$nextTick(() => {
this.$refs['slideimagefaildref'][index].initfilepath(alarm.id)
})
})
子组件的 initfilepath 方法和 dealimagedata 方法：
async initfilepath(alarmid) {
// ... 省略部分代码 ...
await this.dealimagedata(data)
}
async dealimagedata(data, id = 'alarmid') {
// ... 省略部分代码 ...
let promiselist = Promise.all(this.imagepaths.map(async (path) => {
return this.loadimgaepath(path)
}))
await promiselist.then(async (data: any) => {
// ... 省略部分代码 ...
})
}
问题在于，forEach 循环是同步的，它不会等待 initfilepath 方法（以及其中的异步操作）执行完毕。
解决方案： 为了等待所有子组件的 initfilepath 方法执行完毕，我们需要使用 Promise.all。修改后的父组件代码如下：
const initPromises = this.identifyFailed.map(async (alarm: Alarm, index: number) => {
await this.$nextTick()
return await this.$refs['slideImageFaildRef'][index].initFilePath(alarm.id)
})
Promise.all(initPromises).then(() => {
// 所有子组件的 initFilePath 方法都执行完毕后执行的代码
});
通过 map 方法将每个子组件的 initfilepath 方法调用包装成一个 Promise，然后使用 Promise.all 等待所有 Promise 都 resolve 后，再执行 .then 中的代码。 await this.$nextTick() 确保 DOM 更新完毕后再执行 initfilepath 方法。 这保证了所有异步操作完成后，父组件才能继续执行后续操作。
