Electron中通过Context Bridge使用ipcRenderer.invoke获取返回值异常

你的代码存在三个关键问题，导致renderer端获取的响应为undefined：

1. preload.js中doInvoke函数参数定义错误 #

函数定义里写的是(channel, func)，但实际调用时传递的是channel和data，参数名不匹配，代码里用到的data属于未定义变量（虽然你main.js里能拿到数据，应该是代码笔误导致）。

2. doInvoke函数未返回Promise #

ipcRenderer.invoke本身会返回Promise，但你的代码只是调用了该方法，没有把Promise返回出去，导致await window.api.doInvoke(...)等待的是一个无返回值的函数，自然得到undefined。

3. renderer.js中参数传递写法冗余 #

channel='some-channel'这种写法属于给变量赋值后传值，不是JS标准的参数传递方式，完全可以简化。

修复后的代码 #

preload.js

contextBridge.exposeInMainWorld(
    "api", {
        doInvoke: (channel, data) => { // 修正参数名，和调用端保持一致
            let validChannels = ["some-channel"];
            if (validChannels.includes(channel)) {
                // 返回invoke的Promise，让renderer端的await能正确获取结果
                return ipcRenderer.invoke(channel, data);
            }
            // 可选：处理无效channel的情况
            return Promise.reject(new Error("无效的调用通道"));
        },
    }
);

renderer.js

$(document).on('keyup','input', async function(e){
    // 直接传递参数，去掉冗余的变量赋值写法
    let response = await window.api.doInvoke('some-channel', 'test-string');
    console.log(response); // 现在会输出'test-strings'
})

main.js（逻辑无需修改）

ipcMain.handle('some-channel', async (event, data) => {
  const result = await doSomeWork(data);
  return result;
});

async function doSomeWork(data){
  console.log(data);  //--> logs 'test-string'
  return data + 's';
}

核心说明 #

ipcRenderer.invoke返回的是Promise对象，必须让doInvoke函数把这个Promise返回出去，renderer端的await才能正确等待异步操作完成并拿到结果。

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