electron 中 ipcRenderer 的常用方法有哪些?

1. `send`方法

1.1 功能

用于从渲染进程向主进程发送消息。这是最常用的方法之一,它允许渲染进程触发主进程中的操作或传递数据。

1.2 示例

javascript 复制代码
const { ipcRenderer } = require("electron");

function sendMessageToMain() {

  // 发送一个名为 'user - action' 的消息,附带一个数据对象

  ipcRenderer.send("user - action", {

    action: "button - click",

    data: "Some additional data",

  });

}

1.3 说明

在这个例子中,`sendMessageToMain`函数通过`ipcRenderer.send`发送一个消息`user-action`给主进程,同时还传递了一个包含操作类型(`button-click`)和一些额外数据(`Some additional data`)的对象。主进程可以通过监听`user-action`这个消息来执行相应的操作。

2. `on`方法

2.1 功能

用于在渲染进程中监听主进程发送过来的消息。当主进程发送的消息与监听的消息名称匹配时,就会执行对应的回调函数。

2.2 示例

javascript 复制代码
const { ipcRenderer } = require("electron");

ipcRenderer.on("response - from - main", (event, data) => {

  console.log("Received response from main:", data);

  // 可以在这里根据接收到的数据更新UI

});

2.3 说明

在这个代码片段中,`ipcRenderer.on`用于监听来自主进程的`response - from - main`消息。当收到这个消息时,会在控制台打印出接收到的数据,并且可以在回调函数中对用户界面(UI)进行更新,例如更新文本内容、显示隐藏元素等操作。

3. `once`方法

3.1 功能

与`on`方法类似,但是`once`方法只会监听并处理一次消息。在接收到指定消息并执行一次回调函数后,就会自动停止监听该消息。

3.2 示例

javascript 复制代码
const { ipcRenderer } = require("electron");

ipcRenderer.once("one - time - message", (event, data) => {

  console.log("Received one - time message:", data);

});

3.3 说明

这里`ipcRenderer.once`监听`one - time - message`消息。当这个消息被主进程发送过来时,回调函数会被执行一次,然后就不再监听这个消息了。这种方法适用于只需要处理一次的消息,比如初始化数据的加载或者一次性的通知。

4. `sendSync`方法(不推荐使用,有阻塞风险)

4.1 功能

它也用于从渲染进程向主进程发送消息,但与`send`方法不同的是,`sendSync`是同步发送消息。这意味着渲染进程会等待主进程处理完消息并返回结果后才继续执行后续操作。

4.2 示例

javascript 复制代码
const { ipcRenderer } = require("electron");

try {

  let result = ipcRenderer.sendSync("sync - request", {

    request: "get - data",

  });

  console.log("Received sync response:", result);

} catch (error) {

  console.error("Error in sync communication:", error);

}

4.3 说明

在这个例子中,`ipcRenderer.sendSync`发送一个名为`sync - request`的同步消息给主进程,请求获取数据。渲染进程会等待主进程处理这个请求并返回结果。如果主进程成功返回结果,会将结果存储在`result`变量中并打印出来;如果出现错误,会在`catch`块中捕获并打印错误信息。不过,由于同步通信可能会导致渲染进程阻塞,影响应用的性能和响应性,所以一般不推荐使用这个方法。

5. `invoke`方法(推荐用于异步请求)

5.1 功能

这是一种用于从渲染进程向主进程发送异步请求并等待响应的方法。它返回一个 Promise,使得代码更加异步友好,避免了`sendSync`方法可能带来的阻塞问题。

5.2 示例

javascript 复制代码
const { ipcRenderer } = require("electron");

async function makeAsyncRequest() {

  try {

    let result = await ipcRenderer.invoke("async - request", {

      request: "get - detailed - data",

    });

    console.log("Received async response:", result);

  } catch (error) {

    console.error("Error in async communication:", error);

  }

}

5.3 说明

`ipcRenderer.invoke`发送一个名为`async-request`的异步请求给主进程,请求获取详细数据。由于它返回一个 Promise,所以可以使用`await`来等待主进程的响应。当主进程返回结果后,会将结果存储在`result`变量中并打印出来;如果出现错误,会在`catch`块中捕获并打印错误信息。这种方法在处理需要等待主进程返回结果的异步操作时非常方便,是一种比较推荐的方式。

相关推荐
向前看-11 分钟前
验证码机制
前端·后端
燃先生._.1 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖2 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235242 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240253 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar3 小时前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人4 小时前
前端知识补充—CSS
前端·css
GISer_Jing4 小时前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试
m0_748245524 小时前
吉利前端、AI面试
前端·面试·职场和发展