如何通过Electron的contextBridge/IPCRenderer向调用方返回操作结果？

• ipcRenderer.send()是单向异步通信接口，本身无返回值，你测试时拿到的结果必然是undefined，不存在“直接调用send可以正常接收数据”的情况，属于测试误判。
• 你当前的通信逻辑是单向的：渲染进程发消息给主进程，主进程读取到store值后没有回传给渲染进程，且你主进程的event.reply返回逻辑已经被注释，自然拿不到返回值。

Electron 7+ 提供了ipcRenderer.invoke + ipcMain.handle的Promise化双向通信接口，专门用于需要返回值的跨进程调用场景，修改代码如下：

1. 修改预加载脚本 #

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

contextBridge.exposeInMainWorld('electron', {
  electronStore: {
    // 返回invoke的Promise结果
    get(val) {
      return ipcRenderer.invoke('electron-store-get', val);
    },
    set(property, val) {
      // set也可以用invoke返回执行结果，方便渲染进程确认设置完成
      return ipcRenderer.invoke('electron-store-set', property, val);
    },
    // 可按需添加has()、reset()等其他方法
  },
});

2. 修改主进程ipc监听逻辑 #

// 替换原来的ipcMain.on('electron-store-get')逻辑
ipcMain.handle('electron-store-get', async (event, val) => {
  return store.get(val); // 直接返回需要传给渲染进程的存储值
});
// 替换原来的ipcMain.on('electron-store-set')逻辑
ipcMain.handle('electron-store-set', async (event, property, val) => {
  return store.set(property, val);
});

3. 修改渲染进程调用方式 #

跨进程通信本身是异步的，需要用async/await或.then接收返回值：

// 方式1：async/await调用
async function getTestVal() {
  let a = await window.electron.electronStore.get('test');
  console.log(a);
}
getTestVal();

// 方式2：.then链式调用
window.electron.electronStore.get('test').then(a => {
  console.log(a);
});

如果不想使用invoke接口，需要改造为双向事件监听逻辑：

1. 主进程放开返回逻辑的注释，修改为：

ipcMain.on('electron-store-get', async (event, val) => {
  const reply = store.get(val);
  event.reply('electron-store-get-reply', reply); // 建议更换事件名避免和发送事件重名
});

2. 预加载脚本的get方法改造成回调形式：

get(val, callback) {
  // 用once只监听一次返回事件，避免重复监听内存泄漏
  ipcRenderer.once('electron-store-get-reply', (_, result) => callback(result));
  ipcRenderer.send('electron-store-get', val);
}

3. 渲染进程调用方式修改为：

window.electron.electronStore.get('test', (a) => {
  console.log(a);
});

注意：该方案需要注意重复绑定监听事件导致的内存泄漏问题，优先使用invoke/handle方案。

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