async/await使用异常：循环未执行完毕提前输出‘done’

嘿，我来帮你拆解这个问题，并且给出靠谱的修复方案：

问题原因 #

核心问题出在process函数的实现上——它依赖第三方库的回调式异步API，但自己没有封装成Promise。

你看，postprocess里用了await process(...)，但process并没有返回一个Promise对象。在JavaScript里，await如果接的不是Promise，会直接把它包装成一个已完成状态的Promise，相当于根本不会等待第三方库的异步处理结束。

这就导致for循环里的await postprocess(image)实际上没等当前图片处理完成就继续下一次循环了，整个循环会瞬间“走完”，自然console.log('done')就提前打印出来了。

解决方案 #

把process函数封装成Promise，让await能正确等待异步操作完成。具体修改如下：

修复后的完整代码 #

var images = ['image', 'image2', 'image3'];
async function proccess_images(images) {
  for (const image of images) {
    await postprocess(image)
  }
  console.log('done'); // 现在会在所有图片处理完后输出
}
async function postprocess(image) {
  await process(image); // 简化调用，不需要额外传callback
};
function process(image) {
  // 将回调式API封装为Promise
  return new Promise((resolve, reject) => {
    3rdpartylibrary.process(image, (err, data) => {
      if(err) {
        console.error(err);
        reject(err); // 异步出错时标记Promise为失败状态
      } else {
        console.log('not done')
        console.log(data);
        resolve(data); // 异步完成时标记Promise为成功状态
      }
    })
  })
}
proccess_images(images);

关键修改点 #

• 让process函数返回一个Promise，在第三方库的回调中，成功时调用resolve，失败时调用reject，把异步操作的结果和状态交给Promise管理。
• 简化了postprocess的调用逻辑，因为我们可以直接在Promise内部处理数据，或者把数据通过resolve传递出去供后续使用。

这样修改后，for循环里的await postprocess(image)会真正等待当前图片的异步处理完成后再执行下一次循环，console.log('done')就会在所有图片处理完毕后才打印出来了。

内容的提问来源于stack exchange，提问作者user7025244