Electron应用中多CSV文件异步读取列合并的同步问题解决方案咨询

嘿，这个异步IO的经典坑我太熟了！直接用fs.readFileSync确实能让代码“正常运行”，但绝对不推荐——Electron主进程是单线程的，同步IO会把整个应用的事件循环卡住，用户操作界面时会明显感觉到“冻住”，体验极差。咱们得用非阻塞的方式解决，下面给你几个实用方案：

方案一：用Promise.all+Promise化的readFile（兼容旧Node版本） #

如果你的项目还在使用Node.js 10以下的版本，或者习惯手动封装Promise，可以把每个fs.readFile调用包装成Promise，再用Promise.all等待所有异步操作完成：

import fs from 'fs';
import { promisify } from 'util';

// 把回调式的readFile转成Promise版本
const readFileAsync = promisify(fs.readFile);

async function processColumns(dataHandles: any[]) {
  const columns: (number[] | undefined)[] = [];
  // 生成所有读取文件的Promise任务数组
  const readTasks = dataHandles.map(async (dataHandle) => {
    try {
      const rawData = await readFileAsync(dataHandle.filePath);
      const parsedColumn = parseColumnFromStringDataframe(rawData.toString(), dataHandle.columnName);
      columns.push(parsedColumn);
    } catch (err) {
      console.error("读取文件出错:", err);
      columns.push(undefined); // 出错时推入undefined，保持数组结构一致
    }
  });

  // 等待所有文件读取、解析完成
  await Promise.all(readTasks);
  
  // 现在columns已经完全填充好了
  console.log(columns);
  mainWindow?.webContents.send("readDataProductColumnsResponse", columns);
}

// 调用这个异步函数就行
processColumns(dataHandles);

方案二：用Node.js原生fs.promises（最简洁推荐） #

从Node.js 10开始，fs模块自带了fs.promises，内置了Promise版本的所有文件操作，不用自己封装，代码更清爽：

import fs from 'fs/promises';

async function processColumns(dataHandles: any[]) {
  // 直接用map生成所有异步任务，Promise.all会按原顺序返回结果数组
  const columns = await Promise.all(dataHandles.map(async (dataHandle) => {
    try {
      const rawData = await fs.readFile(dataHandle.filePath);
      return parseColumnFromStringDataframe(rawData.toString(), dataHandle.columnName);
    } catch (err) {
      console.error("读取文件出错:", err);
      return undefined; // 出错返回undefined，保证结果数组长度和输入一致
    }
  }));

  // 所有任务完成，放心发送数据
  console.log(columns);
  mainWindow?.webContents.send("readDataProductColumnsResponse", columns);
}

processColumns(dataHandles);

这个方案是我最推荐的——官方原生支持，代码逻辑清晰，而且Promise.all会严格保证结果数组的顺序和dataHandles的顺序一致，完全符合你的需求。

方案三：顺序处理文件（适合IO压力大的场景） #

如果你的CSV文件特别多、特别大，担心并发读取会占用过多系统资源，可以用for-await-of按顺序处理，避免同时打开太多文件：

import fs from 'fs/promises';

async function processColumns(dataHandles: any[]) {
  const columns: (number[] | undefined)[] = [];
  // 按顺序逐个处理每个文件
  for await (const dataHandle of dataHandles) {
    try {
      const rawData = await fs.readFile(dataHandle.filePath);
      const parsedColumn = parseColumnFromStringDataframe(rawData.toString(), dataHandle.columnName);
      columns.push(parsedColumn);
    } catch (err) {
      console.error("读取文件出错:", err);
      columns.push(undefined);
    }
  }

  console.log(columns);
  mainWindow?.webContents.send("readDataProductColumnsResponse", columns);
}

processColumns(dataHandles);

为啥坚决不推荐fs.readFileSync？ #

再强调一遍：Electron主进程是单线程的，同步IO会阻塞整个事件循环。用户拖动窗口、点击按钮、甚至最小化应用这些操作都会完全卡住，直到所有文件读取完成——这对于桌面应用来说是致命的体验问题，除非你的文件只有几KB且数量极少，否则绝对不要用同步读取。

总结一下，最佳选择就是用fs.promises配合Promise.all，既不阻塞应用，代码又简洁易维护，完美解决你的问题。

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