如何从预加载的 Electron 脚本返回数据？

Question

我在

preload.js

中构建了一个函数，用于获取从

main.js

发送的 JSON 文件。

renderer.js

加载它很好，但我似乎无法将数据提供给箭头函数之外的另一个变量。

main.js

mainWindow.webContents.on('did-finish-load', () => {
  fs.readFile('src/project-files/default.json', 'utf-8', (err, data) => {
    if (err) {
      console.log(err);
      return;
    } else {
      console.log("*** Successfully read JSON file");
      mainWindow.webContents.send('load-default-json-file', data);
      console.log("*** Sent JSON data ***")
    }
  })
})

预加载.js

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

contextBridge.exposeInMainWorld('electronAPI', {
  loadDefaultJSON: (callback) => ipcRenderer.on('load-default-json-file', (_event, value) => callback(value))
})

渲染器.js

var data; // undefined
electronAPI.loadDefaultJSON((json) => {
  data = json;
  console.log(data); // Works fine
  return data;
});
console.log(data); // Undefined, doesn't work

关于如何将数据转义到函数范围之外有什么想法吗？

Answer 1

在这种情况下，您可能应该使用

ipcRenderer.sendSync(...)

中的

preload.js

和

ipcMain.on( ... )

中的

main.js

来获取数据。 您得到

undefined

的原因是因为您尝试在从

main.js

接收数据之前记录数据。 我会尝试按如下方式修改您的代码：

main.js

ipcMain.on('load-default-json-file', (event) => {
  fs.readFile('src/project-files/default.json', 'utf-8', (err, data) => {
    if (err) {
      console.log(err)
      return
    } else {
      console.log('*** Successfully read JSON file')
      event.returnValue = data
      console.log('*** Sent JSON data ***')
    }
  })
})

预加载.js

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

contextBridge.exposeInMainWorld('electronAPI', {
  loadDefaultJSON: () => ipcRenderer.sendSync('load-default-json-file')
})

渲染器.js

let data = electronAPI.loadDefaultJSON()

console.log(data)

但是，请记住，您的应用程序将冻结/等待，直到从

main.js

收到数据。 可能可以忽略不计，但需要谨慎。