本文详解如何在 Electron 应用中通过 IPC 与 contextBridge 实现跨进程异步通知，解决 .then() 无效的根本原因——主进程未返回 Promise、Renderer 端盲目 resolve 导致逻辑提前执行的问题。
本文详解如何在 electron 应用中通过 ipc 与 contextbridge 实现跨进程异步通知，解决 `.then()` 无效的根本原因——主进程未返回 promise、renderer 端盲目 resolve 导致逻辑提前执行的问题。
在 Electron 开发中，一个常见误区是：在 Renderer 进程中手动创建 Promise 并立即 resolve，却未真正等待主进程完成 I/O 操作。你遇到的 promise.then() not working 并非 Promise 本身失效，而是逻辑设计违背了异步通信本质——window.electron.saveJson(dataArray) 是一个无返回值的 IPC 发送调用，它不返回 Promise，也不阻塞执行；而你在 new Promise(...) 内部直接 resolve()，导致回调在文件保存尚未开始时就已触发。
✅ 正确方案：主进程主动通知 + Renderer 端事件监听
Electron 的 IPC 机制默认是单向、无返回的（ipcRenderer.send / ipcMain.on）。若需“等待主进程完成”，必须采用事件驱动式响应模型：Renderer 发起请求 → 主进程处理并完成后主动发送成功事件 → Renderer 监听该事件执行后续逻辑。
1. 配置预加载脚本（preload.js）——安全暴露 IPC 接口
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electron', {
// 发起保存请求（无返回）
saveJson: (data) => ipcRenderer.send('saveJson', data),
// 注册成功回调监听器（推荐使用 once 避免重复绑定）
onJsonSaveSuccess: (callback) => {
ipcRenderer.once('jsonSuccess', (event, success) => {
callback(success);
});
}
});⚠️ 注意：使用 ipcRenderer.once 而非 on，避免多次调用 concatAndSave() 导致监听器重复注册；若需支持多次响应，请在回调内手动 removeListener 或统一管理事件句柄。
2. 主进程（main.js）完成实际 I/O 后主动通知
const { app, BrowserWindow, dialog, ipcMain } = require('electron');
const fs = require('fs').promises; // 推荐使用 Promise 版 API
ipcMain.on('saveJson', async (event, data) => {
const options = {
title: 'Save JSON File',
defaultPath: 'data.json',
filters: [{ name: 'JSON Files', extensions: ['json'] }]
};
try {
const result = await dialog.showSaveDialog(win, options);
if (!result.canceled) {
const filePath = result.filePath;
const jsonData = JSON.stringify(data, null, 2); // 格式化提升可读性
await fs.writeFile(filePath, jsonData, 'utf-8');
// ✅ 关键：操作成功后，向 Renderer 发送确认事件
win.webContents.send('jsonSuccess', true);
}
} catch (err) {
console.error('Failed to save JSON:', err);
// 可选：发送失败事件供 Renderer 处理错误提示
win.webContents.send('jsonSaveError', err.message);
}
});? 提示：改用 fs.promises.writeFile 可避免回调地狱，并天然支持 async/await，大幅提升代码可维护性。
3. Renderer 进程（renderer.js）发起请求并监听结果
function concatAndSave() {
const dataArray = [...jsonArrLeft, ...jsonArrRight]; // 推荐用展开语法替代 concat()
window.electron.saveJson(dataArray); // 仅发送请求，不等待
// ✅ 在调用后立即注册一次性的成功监听器
window.electron.onJsonSaveSuccess((success) => {
if (success) {
closeSaveConfigWindow();
const now = new Date();
const timestamp = `[${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}]`;
textArea.value += `JSON data saved successfully ${timestamp}\n\n`;
textArea.scrollTop = textArea.scrollHeight;
removeStars(tableLeft.querySelector('#mf-table-body'), unsavedLeft);
removeStars(tableRight.querySelector('#mf-table-right'), unsavedRight);
}
});
}? 关键要点总结
- ❌ 错误模式：Renderer 自行 new Promise(...).resolve() —— 完全脱离主进程执行状态，属于“假异步”；
- ✅ 正确模式：Renderer 只发请求、不假设结果；主进程完成 I/O 后显式通知；Renderer 监听事件响应；
- ? 安全前提：所有 IPC 通信必须经由 contextBridge 显式暴露，禁用 nodeIntegration: true；
- ? 扩展建议：
- 增加 jsonSaveError 事件处理失败场景；
- 使用 dialog.showMessageBox 在主进程弹出保存结果提示（更符合桌面应用体验）；
- 对 saveJson 方法添加防抖或加载态 UI，防止用户重复点击。
通过这一模式，你不仅解决了 .then() 不生效的问题，更构建了符合 Electron 架构规范、可维护性强、安全性高的跨进程异步通信流程。
