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更新后才调用子组件方法。
以上就是async await和.then：如何确保.then方法在await之后异步操作完全执行完毕？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1503389.html
微信扫一扫 
支付宝扫一扫 
