ElectronJS技术问询：如何从renderer.js向main.js传值并返回结果

要实现渲染进程（renderer.js）向主进程（main.js）发送数据、主进程执行操作后返回结果，需用Electron的ipcMain.handle和ipcRenderer.invoke组合——这是支持异步返回的标准方案。以下是修正后的完整代码：

1. 主进程（main.js）修改 #

把原有的ipcMain.on替换为ipcMain.handle，它支持异步函数并可直接返回Promise结果：

const { ipcMain } = require('electron');
// 推荐用mysql2/promise库（原生支持Promise，避免回调嵌套）
const mysql = require('mysql2/promise');

const createWindow = async () => {
  // 异步连接MySQL
  let connection;
  try {
    connection = await mysql.createConnection({
      host: '你的主机地址',
      user: '数据库用户名',
      password: '数据库密码',
      database: '目标数据库名'
    });
    console.log('Connected to MySQL database!');
  } catch (err) {
    console.error('Error connecting to MySQL database: ', err);
  }

  // 注册异步处理函数
  ipcMain.handle('fetch-issue-analyses', async (event, data) => {
    const { sdate, edate, cell } = data;
    try {
      // 执行MySQL查询示例
      const [rows] = await connection.execute(
        'SELECT * FROM your_table WHERE date BETWEEN ? AND ? AND cell = ?',
        [sdate, edate, cell]
      );
      // 返回结果给渲染进程
      return rows;
    } catch (err) {
      console.error('Error fetching issue analyses: ', err);
      // 抛出错误，让渲染进程捕获
      throw err;
    }
  });
};

createWindow();

2. 预加载脚本（preload.js） #

必须通过预加载脚本暴露API到渲染进程，符合Electron上下文隔离规则：

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

contextBridge.exposeInMainWorld('electronAPI', {
  fetchIssueAnalyses: (data) => ipcRenderer.invoke('fetch-issue-analyses', data)
});

3. 渲染进程（renderer.js） #

你的原有代码基本正确，只需补充错误捕获逻辑：

const handleFilter = async () => {
  try {
    const response = await window.electronAPI.fetchIssueAnalyses(data);
    console.log('返回结果:', response);
    // 在这里处理返回的数据
  } catch (err) {
    console.error('请求失败:', err);
  }
};

关键说明 #

• ipcMain.handle + ipcRenderer.invoke是Electron官方推荐的异步通信方式，天然适配async/await语法。
• 数据库操作必须用异步方式，避免阻塞主进程导致界面卡顿。
• 预加载脚本是渲染进程与主进程通信的安全桥梁，渲染进程不能直接引入Electron核心模块。

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