Electron中如何等待Page.js异步进程结束后向页面返回响应

嘿，我来帮你搞定这个问题！你遇到的.then()不是一个函数错误，核心原因是excel_n1(inputDate)返回的不是一个Promise对象——虽然你在page.js里导出了async函数（async函数调用后默认会返回Promise），但大概率是你的page.js函数内部实现有问题，或者Main.js里的调用方式需要调整。

下面是具体的解决方案和代码修正：

1. 确保page.js的async函数正确实现 #

首先，你的page.js里的异步函数必须保证是标准的async函数，并且要有明确的返回值（哪怕是处理后的结果或者undefined）。比如：

// page.js
module.exports = async function(inputDate){
  // 这里放你的耗时异步操作，比如读取Excel、处理数据等
  // 模拟耗时操作示例
  await new Promise(resolve => setTimeout(resolve, 2000));
  
  // 一定要返回处理后的结果，否则Promise会resolve为undefined
  return `已完成${inputDate}的处理`;
};

2. 修正Main.js的异步处理逻辑 #

你可以选择两种方式来处理page.js返回的Promise：

方式一：使用.then()链式调用（和你原来的思路一致） #

// Main.js
const { ipcMain } = require('electron');
// 用const代替var，更符合JS规范
const excel_n1 = require('./page.js');

ipcMain.on('asynchronous-message', (event, inputDate) => {
  // 调用async函数，得到Promise对象
  excel_n1(inputDate)
    .then(result => {
      // 异步操作完成后，给Index页面返回结果
      event.sender.send('asynchronous-reply', result);
    })
    .catch(error => {
      console.error("处理过程出错：", error);
      // 最好给前端也返回错误提示，方便调试
      event.sender.send('asynchronous-reply', `错误：${error.message}`);
    });
});

方式二：使用async/await（代码更简洁易读） #

// Main.js
const { ipcMain } = require('electron');
const excel_n1 = require('./page.js');

// 给事件处理函数加上async，这样就能在内部用await了
ipcMain.on('asynchronous-message', async (event, inputDate) => {
  try {
    // 等待page.js的异步函数完成
    const result = await excel_n1(inputDate);
    // 返回结果给Index页面
    event.sender.send('asynchronous-reply', result);
  } catch (error) {
    console.error("处理过程出错：", error);
    event.sender.send('asynchronous-reply', `错误：${error.message}`);
  }
});

3. 优化Index.html的事件绑定 #

你原来的代码里，每次提交表单都会重新绑定一次ipcRenderer.on('asynchronous-reply')，这会导致多次接收响应的问题。建议把接收事件的绑定移到submit事件外面，只绑定一次：

// Index.html
const { ipcRenderer } = require('electron');

// 只绑定一次响应接收事件
ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log(arg);
  document.getElementById('results').innerHTML = arg;
});

document.querySelector('#formhomepage').addEventListener('submit', function(e) {
  e.preventDefault();
  let date = document.getElementById("date-input").value;
  // 发送请求到Main进程
  ipcRenderer.send('asynchronous-message', date);
});

为什么你之前会报错？ #

如果你的page.js里的async函数内部没有正确使用await处理异步操作，或者没有返回值，甚至出现了路径错误导致excel_n1不是函数，都可能引发.then()不是一个函数的错误。按照上面的代码修正后，应该就能正常工作了。

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