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`块中捕获并打印错误信息。这种方法在处理需要等待主进程返回结果的异步操作时非常方便,是一种比较推荐的方式。

相关推荐
TrisighT1 小时前
Electron 跑在鸿蒙 PC 上,单窗口和多窗口内存差 800MB?我抓了 5 组数据
性能优化·electron·harmonyos
竹林8181 小时前
用 wagmi v2 + viem 监听链上事件,我踩了三天坑终于搞懂了实时日志与历史补全
javascript
Momo__1 小时前
VueUse createReusableTemplate —— 单文件组件内的模板复用神器
前端·vue.js
只一1 小时前
😭从回调地狱到 async/await:一文打通 Ajax 与 JS 异步编程
javascript
程序员小富1 小时前
我开源了一个开发者专属的智能 JSON 工具,得到了媳妇高度认可
前端·vue.js·后端
小小小小宇1 小时前
程序员如何给 LLM 装工具以及看懂推理过程
前端
写代码的皮筏艇1 小时前
React中的forwardRef
前端·react.js·面试
槑有老呆1 小时前
花三个月工资请了个 AI 程序员,结果它连青岛啤酒股价都查不了
前端
风骏时光牛马1 小时前
Verilog开发常见问题汇总解析
前端
子兮曰1 小时前
AI Coding Method Map:一张图看懂 AI 编程的完整链路
前端·人工智能·后端