如何从Electron预加载脚本中获取数据并传递至外部变量？

在Electron项目中，我通过preload.js实现了接收main.js发送的JSON文件的函数，renderer.js能正常加载该函数，但无法将回调内的JSON数据赋值给外部变量。相关代码如下：

相关代码 #

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 ***")
    }
  })
})

preload.js #

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

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

renderer.js #

var data; // undefined
electronAPI.loadDefaultJSON((json) => {
  data = json;
  console.log(data); // 正常输出数据
  return data;
});
console.log(data); // 输出undefined，无法获取数据

请问有什么方法能让数据脱离该函数作用域？

这不是作用域的问题，而是异步执行顺序导致的：console.log(data)是同步代码，会在回调函数执行前就运行，这时候回调还没给data赋值，所以输出undefined。以下是几种可行的解决方式：

1. 把数据逻辑放到回调内（最直接） #

所有需要用到data的代码都写在回调函数里，确保数据已经被赋值后再执行：

var data;
electronAPI.loadDefaultJSON((json) => {
  data = json;
  console.log(data);
  // 在这里编写所有依赖data的逻辑
  processData(data);
});

function processData(data) {
  // 处理数据的业务代码
}

2. 用Promise封装，配合async/await（更优雅的异步写法） #

先修改preload.js，将监听逻辑封装为Promise：

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

contextBridge.exposeInMainWorld('electronAPI', {
  loadDefaultJSON: () => new Promise((resolve) => {
    // 用once代替on，避免重复监听同一事件
    ipcRenderer.once('load-default-json-file', (_event, value) => resolve(value));
  })
})

然后在renderer.js中使用async/await：

async function loadAndUseData() {
  const data = await electronAPI.loadDefaultJSON();
  console.log(data);
  // 在这里使用data
}

loadAndUseData();

3. 自定义全局事件（适合多次接收数据的场景） #

如果需要多次监听load-default-json-file事件，可以通过自定义事件传递数据：

// renderer.js
electronAPI.loadDefaultJSON((json) => {
  // 触发自定义全局事件
  window.dispatchEvent(new CustomEvent('default-json-loaded', { detail: json }));
});

// 监听自定义事件，获取数据
window.addEventListener('default-json-loaded', (event) => {
  const data = event.detail;
  console.log(data);
  // 处理数据
});

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