渲染器中的电子负载滞后

Question

我目前正在构建一个电子打字稿反应应用程序。它是一种帐户管理器，可以检索特定帐户的数据并将数据显示给用户。

我的问题是， ipcMain.on('acc:reload') 从 api 获取，然后将数据加载到对象中并将其发送到渲染器。

在整个获取时间（或多个帐户的“获取时间”）中，渲染器窗口进程处于冻结状态。 我认为，主进程是分开的，因此不会阻塞渲染器。

相关代码：

listeners.ts（片段）

ipcMain.on('acc:reload', async (event) => {
    event.reply('acc:reload', accounts); // old account data to at least display something
    try {
      const updatedAccounts = await Promise.all(
        accounts.map(async (acc) => {
          try {
            const newData = await getAccountData(acc);
            return { ...acc, data: newData };
          } catch (error) {
            console.error(
              `Error reloading data for account ${acc.username}:`,
              error
            );
            // If an error occurs, return the original account without data
            return acc;
          }
        })
      );
      writeAccountsToFile(updatedAccounts);
      event.reply('acc:reload', updatedAccounts); // new 'fetched' account data
    } catch (error) {
      console.error('Error reloading account data:', error);
    }
  });

应用程序.tsx

function Main() {
  const refreshAccounts = () => {
    window.electron.accountLoadHandler.sendMessage('acc:reload');
  };
  useEffect(() => {
    refreshAccounts();
  }, []);
  window.electron.accountLoadHandler.once('acc:reload', (accs: Account[]) => {
    setAccounts(accs);
  });

  return (
    <div className="px-4 dark:bg-zinc-900 h-full min-h-screen dark:text-zinc-300">
      <Header handleRefresh={refreshAccounts} switchDark={switchDark} />
      <AccountList accounts={accounts} />
      <ToastContainer />
      <div className="flex w-full p-2 justify-center">
        <p>2024 ©</p>
      </div>
    </div>
  );
}

账户数据获取器：

export default async function getAccountData(acc: Account) {
  const url = `example.com/api/data` + account.name;
  try {
    const response = await fetch(url);
    const text = await response.text();
    const dom = new JSDOM(text);
    const flexData = await readFlexData(dom.window.document);
    const soloData = await readSoloData(dom.window.document);

    const data = {
      solo: soloData,
      flex: flexData,
    } as IData;
    return data;
  } catch (err) {
    console.error('Request failed ERROR:', err);
    return undefined;
  }
}

如上所述，获取请求位于主进程内部。

在渲染器内部获取 -> 将数据发送到主程序 -> 修改、清理、writeToFile() -> 发送回渲染器是个好习惯吗？

在我看来，在那里执行获取请求似乎不对，但可能是解决方案。或者我应该使用某种形式的workerThread？

提前致谢。

Answer 1

解决我的问题的是使用“电子获取”模块。

import fetch from 'electron-fetch';

这样它真正异步加载内容并且不会阻塞进程。