Electron in Action：Electron 笔记1

This article will continue to be updated, until it becomes too long

捉虫：

通过点击一个按钮，显示一条 alert，原书中给出如下代码（Listing 2.6）：

1
2
3
4
5
app.on('ready', () => {
    console.log('Hello from Electron.');
    mainWindow = new BrowserWindow();
    mainWindow.webContents.loadFile('index.html'); 
});

这段代码是无法显示出原书想要的效果的，在 Electron 16.0.04 版本以后，需要添加必要参数，修改代码如下所示：

1
2
3
4
5
6
7
8
9
app.on('ready', () => {
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        }
    });
    mainWindow.webContents.loadFile('./app/index.html');
})

解释：BrowserWindow 是 Electron 框架中用于创建一个新窗口的类，其中 webPreferences 属性用于定义一些该窗口的 web 功能和行为。

  • nodeIntegration：这个选项表示在窗口的 web 页面中是否允许 Node.js 的集成。在笔者使用的 Electron v26.2.1 版本中，去掉这个属性则会直接导致无法显示 alert(__dirname) 的内容。
  • contextIsolation：当这个属性设置为 true 时，主进程和渲染进程运行在不同的 JavaScript 上下文中，这增加了一层额外的安全性。当设置为 false 时，主进程和渲染进程运行在同一个上下文，这样可以更方便的共享变量。在 StackOverflow 的相关解答中，有部分情况下不修改这个属性也能使 alert(__dirname) 正常运行，请自行分辨。

Fetch API：

书中对 Fetch API 一笔带过，这里再详细介绍一下这个接口的用法。

fetch 是一个原生的 JavaScript API，用于在网络上进行资源获取，它返回一个 Promise，开发者可以使用 .then() 和 .catch() 方法或者 async/await 语法来处理异步操作。

基础用法

下面是一个基础的 fetch 示例：

1
2
3
4
fetch('https://api.example.com/data')
    .then(response => response.json())  // 解析响应为 JSON
    .then(data => console.log(data))  // 处理解析后的数据
    .catch(error => console.error('Error:', error));  // 捕获错误

请求和响应

fetch 默认执行 GET 请求，但也可以显示地使用其他 HTTP 方法：

1
2
3
4
5
6
7
fetch('https://api.example.com/data', {
    method: 'POST',  // or 'PUT', 'DELETE', etc.
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({key: 'value'}),
})

fetch 会返回一个 Response 对象，可以从这个对象中获取各种信息。

异步处理

由于 fetch 返回一个 Promise，可以使用 async/await 语法来简化代码：

1
2
3
4
5
6
7
8
9
async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

Promise 是 JavaScript 中用于处理异步操作的一个对象。异步操作通常包括 I/O 操作，例如网络请求、读取文件、数据库操作等，这些操作可能需要一段时间才能完成，并且通常不会立即返回结果。

一个 Promise 对象代表一个最终可能会完成（resolve）或者失败（reject）的异步操作，以及它的结果。