Electron中如何在循环迭代时从主进程向渲染进程传递数据？

你的问题出在ipcMain.handle搭配ipcRenderer.invoke是单次请求-响应模式，一旦主进程执行return就会结束函数，所以只能拿到第一个值。要实现循环传递进度，需要用主进程主动推送+渲染进程监听的方式，具体修改如下：

修改主进程（main.js） #

把handle改成监听启动任务的事件，循环中通过event.sender.send向渲染进程推送进度，任务完成后发送结束信号：

// 监听渲染进程的启动任务请求
ipcMain.on('start-progress-task', async (event) => {
  for (let i = 0; i < 3; i++) {
    // 向触发该事件的渲染进程推送当前进度
    event.sender.send('progress-update', i);
    // 模拟处理延迟，避免进度瞬间完成
    // 实际场景建议用异步操作（如文件IO、网络请求），避免阻塞主进程
    await new Promise(resolve => setTimeout(resolve, 1000));
  }
  // 任务完成后发送结束信号
  event.sender.send('progress-complete');
});

修改预加载脚本（preload.js） #

暴露启动任务、监听进度更新和完成事件的方法：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electron', {
  // 启动进度任务
  startProgressTask: () => ipcRenderer.send('start-progress-task'),
  // 监听进度更新
  onProgressUpdate: (callback) => ipcRenderer.on('progress-update', (_, data) => callback(data)),
  // 监听任务完成
  onProgressComplete: (callback) => ipcRenderer.on('progress-complete', callback)
});

修改渲染进程（renderer.js） #

调用启动任务方法，同时监听进度更新和完成事件：

function handleStartProgressTask() {
  try {
    // 移除旧监听，避免重复触发
    ipcRenderer.removeAllListeners('progress-update');
    ipcRenderer.removeAllListeners('progress-complete');

    // 监听进度更新，可在此更新DOM展示进度
    window.electron.onProgressUpdate((progress) => {
      console.log('当前进度:', progress);
    });

    // 监听任务完成
    window.electron.onProgressComplete(() => {
      console.log('任务完成');
    });

    // 启动主进程任务
    window.electron.startProgressTask();
  } catch (error) {
    console.error(error);
  }
}

关键说明 #

• ipcMain.on + ipcRenderer.send是单向推送模式，适合主进程主动向渲染进程发送多次数据
• 实际业务中，主进程的循环操作如果是异步任务（如文件读取、批量接口请求），无需同步延迟，直接在异步回调中发送进度即可
• 每次启动任务前移除旧监听，避免多次调用时触发重复回调

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