Electron开发如何等待Promise解析完成后更新HTML header内容

输出显示[object Object]-jdls4ksls和async/await语法无关，你之前猜测的Promise未等待问题不成立，render.js里已经正确添加了await关键字，会自动等待IPC异步返回结果再执行赋值。实际是两个编写错误导致的异常：

• 主进程ipcMain.handle绑定的回调函数，第一个入参固定是IPC事件对象，直接把generatePassword作为回调传入时，函数接收到的keyword参数实际是事件对象，对象隐式转字符串就会显示[object Object]
• preload脚本中调用ipcRenderer.invoke时，通道名误写为geåneratePassword，混入了乱码字符，和主进程注册的generatePassword通道名不匹配，会直接导致IPC通信失败

1. 修正preload脚本中的IPC通道名拼写，去掉乱码字符，确保和主进程注册的通道名完全一致
2. 调整主进程ipcMain.handle的回调写法，忽略第一个事件参数，取第二个入参作为关键词传入密码生成函数
3. 渲染进程的异步调用逻辑本身写法正确，不需要额外做阻塞处理，既可以保留async/await写法，也可以根据个人习惯换成.then()链式调用写法

main.js（主进程） #

const {app, BrowserWindow, ipcMain} = require("electron")
const path = require("path")

function generatePassword(keyword) {
    console.log(keyword)
    return keyword + '-' + Math.random().toString(36).substring(2,12)
}

function createWindow () {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        resizable: false,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    })

    win.loadFile('html/passwordGen.html')
}

app.whenReady().then(() => {
    ipcMain.handle('generatePassword', (_event, keyword) => {
        console.log(keyword);
        return generatePassword(keyword);
    });
    createWindow()
}).catch(error => {
    console.log(error)
    app.quit()
})

preload.js（预加载脚本） #

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

contextBridge.exposeInMainWorld('main', {
    genPW: (keyword) => {
        return ipcRenderer.invoke("generatePassword", keyword)
    }
})

render.js（渲染进程脚本） #

async function testClick () {
    const pw_root = document.getElementById("keyword")
    const pw_label = document.querySelector("#password")
    // 写法1：async/await
    pw_label.innerText = await window.main.genPW(pw_root.value)
    
    // 写法2：.then链式调用，和上面写法二选一即可
    // window.main.genPW(pw_root.value).then(res => {pw_label.innerText = res})
}

passwordGen.html（页面文件） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Generator</title>
    <link rel="stylesheet" href="../css/style.css">
    <script src="../render.js"></script>
</head>
<body>
    <h1>Password Generator</h1>
    <input type="text" id="keyword" placeholder="Please enter a keyword...">
    <button id="btn" onclick="testClick()">Generate Password</button>
    <h1 id="password"></h1>
</body>
</html>

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