Electron 中渲染进程与主进程间 Promise 异步通信的正确实现方式-js教程-PHP中文网

本文详解 Electron 应用中因 IPC 通信未返回 Promise 导致 .then() 不触发的根本原因，并提供基于 contextBridge + ipcRenderer.on 的可靠回调方案，确保保存操作完成后再执行 UI 更新。

本文详解 electron 应用中因 ipc 通信未返回 promise 导致 `.then()` 不触发的根本原因，并提供基于 `contextbridge` + `ipcrenderer.on` 的可靠回调方案，确保保存操作完成后再执行 ui 更新。

在 Electron 开发中，渲染进程（renderer）常需调用主进程（main）执行文件系统等受限操作（如保存 JSON）。许多开发者会自然地尝试用 Promise 封装 IPC 调用并链式调用 .then()，但若主进程未主动回传结果，该 Promise 将永远处于 pending 状态——这正是原问题的核心：window.electron.saveJson(dataArray) 是一个无返回值的“火且忘”（fire-and-forget）调用，resolve() 在 saveJson 发起后立即执行，而非等待文件写入完成。

✅ 正确做法：主进程完成时主动通知，渲染进程监听事件

Electron 的 IPC 机制本身不支持跨进程的 Promise 自动传递（ipcRenderer.invoke 可实现，但需主进程显式 event.reply）。因此，更健壮、清晰的模式是：

渲染进程不创建 Promise 封装 IPC 调用，而是直接发送请求；
主进程在异步操作（如 fs.writeFile）真正完成后，通过 webContents.send 主动推送成功事件；
渲染进程提前注册事件监听器，响应主进程的完成通知。

? 实现步骤

在 preload.js 中暴露安全的事件监听接口

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electron', {
  saveJson: (data) => ipcRenderer.send('saveJson', data),
  // 新增：注册对 'jsonSuccess' 事件的监听
  onJsonSuccess: (callback) => {
    ipcRenderer.on('jsonSuccess', callback);
    // 推荐：返回清理函数，避免内存泄漏
    return () => ipcRenderer.removeListener('jsonSuccess', callback);
  }
});

⚠️ 注意：exposeInMainWorld 中避免直接暴露 ipcRenderer.on（易导致多次监听），应封装为可管理的注册/注销接口。

主进程 main.js 中完成写入后发送确认事件

// main.js
const { app, BrowserWindow, dialog, ipcMain } = require('electron');
const fs = require('fs').promises; // 推荐使用 Promise 版本简化逻辑

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, 'utf8');
      // ✅ 关键：操作成功后向渲染进程广播事件
      win.webContents.send('jsonSuccess', { success: true, filePath });
    }
  } catch (err) {
    console.error('Save JSON failed:', err);
    win.webContents.send('jsonSuccess', { success: false, error: err.message });
  }
});

? 提示：使用 fs.promises.writeFile 替代回调风格，配合 async/await 可显著提升主进程代码可读性与错误处理能力。

渲染进程注册监听并执行后续逻辑

// renderer.js
function concatAndSave() {
  const dataArray = jsonArrLeft.concat(jsonArrRight);
  window.electron.saveJson(dataArray); // 仅发起请求，不阻塞
}

// ✅ 在页面初始化时（如 DOMContentLoaded 后）注册监听
let cleanupListener;
window.electron.onJsonSuccess((event, payload) => {
  if (payload.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);
  } else {
    alert(`Save failed: ${payload.error}`);
  }
});

// 可选：在组件卸载时清理监听器（如使用 React useEffect 清理）
// cleanupListener = window.electron.onJsonSuccess(...);

? 关键注意事项

不要在渲染进程手动 new Promise 包裹 ipcRenderer.send：它无法感知主进程异步操作状态，.then() 必然提前触发。

优先使用 ipcRenderer.invoke + ipcMain.handle（Electron 12+）：若需严格 Promise 流程，这是官方推荐方式：

// preload.js
invokeJsonSave: (data) => ipcRenderer.invoke('saveJson', data)
// main.js
ipcMain.handle('saveJson', async (e, data) => { /* 返回 Promise */ })