嵌套async异步执行异常，数组arr未正常赋值，求JS异步问题排查方案

问题根因 #

• 混用了回调式fs.readdir和await语法：回调风格的fs.readdir返回值不是Promise，前面加await不会生效，代码不会等待回调内部逻辑执行，就会直接往下跑写文件、打印arr的逻辑，此时回调还没执行，arr自然是空的。
• 未等待全部异步任务完成：即便回调正常触发，你在map中调用的extractImage是异步方法，所有异步任务没跑完就访问arr，也拿不到完整结果。

修复代码 #

推荐直接使用Promise版本的fs API搭配Promise.all等待所有任务执行完毕，代码示例如下：

// 引入Promise风格的fs模块
const fs = require('fs/promises');

async function handleSampleImages() {
  let arr = [];
  // await等待读取samples目录文件列表完成
  const files = await fs.readdir('samples');
  console.log(files);
  // 生成所有图片处理的异步任务数组
  const processTasks = files.map(async (val) => {
    console.log(val);
    return await extractImage(val);
  });
  // 等待所有处理任务完成，拿到最终结果数组
  arr = await Promise.all(processTasks);
  
  // 所有任务完成后再执行写文件、打印操作，如果你原逻辑确实要写入"s"，把下面的JSON.stringify(arr)替换成"s"即可
  await fs.writeFile('final.json', JSON.stringify(arr));
  console.log(arr);
  console.log('tt');
}

// 执行逻辑并捕获异常
handleSampleImages().catch(err => console.error('处理出错：', err));

如果确实需要使用回调风格的fs方法，需要手动在回调内部通过Promise.all等待所有任务完成后再执行后续的写文件、打印逻辑，不推荐这种写法，嵌套层级多可读性差。

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