Electron中如何移除webRequest.onCompleted监听器？

要实现仅执行一次的请求监听并正确移除监听器，关键在于保留回调函数的引用，并在合适的时机（捕获到目标请求或超时）调用removeListener，以下是具体实现方案：

核心要点 #

• 不能使用匿名回调函数，必须保存函数引用，否则removeListener无法匹配到对应监听器
• 在回调触发后立即移除自身，确保只执行一次
• 添加超时逻辑，避免监听器一直存在且未捕获到请求的情况

修改后的代码示例 #

ipcMain.on('retrive-string', (_event, sessionId) => {
  const targetSession = session.fromPartition('persist:' + sessionId);
  const filter = { urls: ['https://google.com/api/*'] };

  // 抽离回调函数，保留引用
  const handleCompleted = (details) => {
    // 移除监听器
    targetSession.webRequest.removeListener('completed', filter, handleCompleted);
    // 清除超时定时器
    clearTimeout(timeoutId);
    // 提取目标值并发送到渲染进程
    const stringId = details.url.split('#')[1];
    if (stringId) {
      mainWindow.webContents.send('string-id', stringId);
    } else {
      // 处理URL中没有目标值的错误场景
      mainWindow.webContents.send('string-id-error', '未从请求URL中获取到目标值');
    }
  };

  // 添加监听器
  targetSession.webRequest.onCompleted(filter, handleCompleted);

  // 设置超时逻辑，比如10秒后未捕获到请求则移除监听器并发送错误
  const timeoutId = setTimeout(() => {
    targetSession.webRequest.removeListener('completed', filter, handleCompleted);
    mainWindow.webContents.send('string-id-error', '请求超时，未捕获到目标请求');
  }, 10000);
});

关键说明 #

1. 保存回调引用：将原本的匿名函数改为命名函数handleCompleted，这样调用removeListener时能准确匹配到对应的监听器
2. 回调内自移除：在成功捕获到请求后，立即调用removeListener移除自身，确保不会重复监听
3. 超时处理：添加超时定时器，避免因网络问题或请求未触发导致监听器一直存在，超时后主动移除并发送错误提示
4. 错误场景覆盖：处理URL中没有目标值的情况，以及请求超时的情况，向渲染进程发送对应的错误信号

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