async/await 和 .then() 的异步操作顺序控制
在使用 async/await 和 .then() 处理异步操作时，确保 .then() 方法在 await 后的异步操作完全执行完毕后再执行，是至关重要的。本文将分析一段代码片段，并提供解决方案，以确保所有异步操作完成后再进行后续处理。
代码片段展示了父组件通过循环调用子组件的 initfilepath 方法，该方法内部使用 async/await 和 .then() 处理图片加载。问题在于，循环会立即执行所有子组件的方法，而 await 只能保证其后单个异步操作完成，.then() 中的后续操作可能在 await 完成前就执行，导致数据不完整或错误。
子组件代码:
// 通过id获取告警图片
async initfilepath(alarmid) {
this.isshowmorewaterfallimage = false;
const { code, data } = await getimagepathofalarmasync(alarmid);
if (code === 200) {
this.dealimagedata(data);
} else {
this.showtype = 1;
}
}
async dealimagedata(data, id = 'alarmid') {
this.imglist = [];
this.carouselcurrentindex = 0;
this.imagepaths = data;
this.imageformpathid = id;
this.showtype = this.imagepaths.length === 0 ? 1 : (this.imagepaths.length === 1 ? 2 : 3);
if (this.showtype !== 1) {
const promiseList = Promise.all(this.imagepaths.map(async (path) => {
return this.loadimgaepath(path);
}));
await promiseList.then(async (data) => { //这里await是多余的，then内部已经是异步的了
this.imglist = data;
this.$nextTick(() => {
if (this.showtype === 2) {
if (this.$refs.imageref) {
this.$refs.imageref.loadimage(data[0]);
}
} else if (this.showtype === 3) {
data.forEach((image, index) => {
if (this.$refs[`imageref${index}`] && this.$refs[`imageref${index}`][0]) {
this.$refs[`imageref${index}`][0].loadimage(image);
}
});
}
});
});
}
}
loadimgaepath(path) {
return new Promise(async (resolve, reject) => { // async 在这里也是多余的
await request({
url: path,
method: 'get',
responseType: 'arraybuffer'
}).then((response) => {
const imgsrc = "data:image/jpeg;base64," + btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ""));
resolve(imgsrc);
}).catch(() => {
reject();
});
});
}
父组件代码片段:
// 父组件调用子组件方法
this.identifyfailed.forEach((alarm, index) => {
this.$nextTick(() => {
this.$refs['slideimagefaildref'][index].initfilepath(alarm.id);
});
});
解决方案:
父组件需要使用 Promise.all 来等待所有子组件的 initfilepath 方法执行完毕。 改进后的父组件代码如下：
const initPromises = this.identifyFailed.map(async (alarm, index) => {
await this.$nextTick(); // 保证DOM更新
return this.$refs['slideImageFaildRef'][index].initfilepath(alarm.id);
});
Promise.all(initPromises).then(() => {
// 所有子组件的 initfilepath 方法执行完毕后执行的代码
console.log('All images loaded!');
}).catch(error => {
console.error('Error loading images:', error);
});
子组件代码优化: 子组件中的 dealimagedata 函数中的 await promiseList.then(...) 中的 await 是冗余的，因为 .then() 本身就是异步的。 loadimgaepath 函数中的 async 也是冗余的。 修改后的子组件 dealimagedata 函数如下：
async dealimagedata(data, id = 'alarmid') {
// ... (other code) ...
if (this.showtype !== 1) {
Promise.all(this.imagepaths.map(async (path) => {
return this.loadimgaepath(path);
})).then((data) => {
// ... (rest of the code) ...
});
}
}
loadimgaepath(path) {
return new Promise((resolve, reject) => {
request({
url: path,
method: 'get',
responseType: 'arraybuffer'
}).then((response) => {
const imgsrc = "data:image/jpeg;base64," + btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ""));
resolve(imgsrc);
}).catch(() => {
reject();
});
});
}
通过这些修改，可以确保所有异步图片加载操作完成后，再执行后续的 DOM 操作，避免数据不一致的问题。 记住要处理 Promise.all 的 catch 块，以便捕获任何加载错误。 此外，$nextTick 保证了在DOM更新后才调用子组件方法。
