Electron中如何将main.js的net模块Chunk数据传递给renderer.js

我在开发Electron应用时，用Node.js的net模块从服务器获取数据。因为net是主进程模块，所以在main.js中调用。按照Electron官方双向IPC模式开发，主进程已经能成功获取数据并打印，但返回给renderer.js时，渲染进程输出：

Promise {}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: undefined

问题原因 #

handleData函数未返回Promise，而net模块的请求是异步操作，事件回调内的return无法传递到IPC处理函数中，导致IPC调用最终返回undefined。同时原代码未处理响应分块数据，可能只拿到部分返回内容。

解决方案 #

将handleData封装为Promise，在数据接收完成后通过resolve传递结果，同时处理分块数据拼接与错误捕获。

修改后的main.js #

const {
    app,
    BrowserWindow,
    ipcMain,
    net
} = require('electron');

const path = require("path");
const remoteMain = require('@electron/remote/main');
remoteMain.initialize();

let win;

// 封装异步请求为Promise
function handleData() {
    return new Promise((resolve, reject) => {
        const request = net.request({
            method: 'GET',
            protocol: 'http:',
            hostname: 'some IP address',
            port: some port,
            path: '/some path',
            redirect: 'follow'
        });

        let responseData = '';

        request.on('response', (response) => {
            console.log(`STATUS: ${response.statusCode}`)
            console.log(`HEADERS: ${JSON.stringify(response.headers)}`)
            
            // 拼接分块响应数据
            response.on('data', (chunk) => {
                responseData += chunk;
                console.log('Received chunk:', chunk);
            })
            
            // 数据接收完成，返回完整结果
            response.on('end', () => {
                console.log('No more data in response.')
                console.log('Full response:', responseData);
                resolve(responseData);
            })
            
            // 捕获响应错误
            response.on('error', (err) => {
                console.error('Response error:', err);
                reject(err);
            })
        })
        
        // 捕获请求错误
        request.on('error', (err) => {
            console.error('Request error:', err);
            reject(err);
        })
        
        request.end()
    });
};

const createWindow = () => {
    win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
        },
    })
    remoteMain.enable(win.webContents)
}

function openIndex() {
    win.loadFile('HTML/index.html');
    win.webContents.openDevTools();
}

ipcMain.handle("request:get", handleData);

app.whenReady().then(() => {
    createWindow();
    openIndex();
    app.on("activate", function() {
        if (BrowserWindow.getAllWindows().length === 0) createWindow();
    });
});

app.on("window-all-closed", function() {
    if (process.platform !== "darwin") app.quit();
});

修正preload.js（移除未定义参数） #

const { contextBridge, ipcRenderer } = require("electron");
contextBridge.exposeInMainWorld("electronAPI", {
  getData: () => ipcRenderer.invoke("request:get"),
});

修正renderer.js（正确处理Promise） #

const btnclick = document.getElementById("PFLIoT");

btnclick.addEventListener("click", async () => {
  console.log("Hello from Machine List IOT");

  // 用async/await处理异步结果，同时捕获错误
  try {
    const response = await window.electronAPI.getData();
    console.log('Received data:', response);
    // 可选：将字符串转为JSON对象
    // const data = JSON.parse(response);
  } catch (err) {
    console.error('Failed to get data:', err);
  }
});

关键说明 #

1. 分块数据拼接：服务器响应可能分多次传输，需将所有data事件的chunk拼接，确保拿到完整数据。
2. Promise封装：IPC的handle方法要求处理函数返回Promise（或同步值），异步操作必须用Promise包裹才能传递结果。
3. 错误处理：添加请求/响应错误监听，通过reject传递错误，渲染进程可通过catch捕获并处理。

内容的提问来源于stack exchange，提问作者A.Muqtadir