addEventListener('fetch', callback) 在 ReactJS 中永远不会触发回调

Posted 2023-02-25

【中文标题】addEventListener(\'fetch\', callback) 在 ReactJS 中永远不会触发回调

【英文标题】：addEventListener('fetch', callback) never fires callback in ReactJSaddEventListener('fetch', callback) 在 ReactJS 中永远不会触发回调

【发布时间】：2019-11-07 22:18:00

【问题描述】：

我正在尝试使用来自this answer 的代码在我的 React 应用程序中拦截 fetch

window.addEventListener('fetch', event =>  console.log("FETCH CAPTURED");  );

但我从来没有看到FETCH CAPTURED 日志。是否可以在 service worker 中拦截fetchnot？

【问题讨论】：

你在使用 create-react-app 吗？

这段代码在你的应用上下文中的什么位置？

@AndrewSchwartz 不确定我是否理解正确。该应用程序的结构如下所示：App->Provider->AppRouter->Layout->(...)。我在 Layout.componentWillMount() 方法中调用这段代码

@ziwert 您在使用 CRA 吗？如果不知道怎么查，去package.json看看有没有react-scripts

@NicolasHevia package.json 中只有 react-scripts-ts

【参考方案1】：

'fetch' 是ServiceWorker#addEventListener 方法支持的事件/参数。这似乎不是一个对ElementTarget#addEventListener 方法有任何意义的事件，这是您调用document.addEventListener 时调用的方法。 Here 是支持的方法列表。

【参考方案2】：

您需要使用 cra-append-sw 自动将您的代码附加到 Service Worker。

---

从文档中：

用于将自定义代码附加到由 Create React App 创建的 ServiceWorker 的实用工具。 它允许保留默认的 CRA 配置（不弹出）。它只是将自定义代码附加到由 CRA 构建脚本创建的 ServiceWorker 文件。默认情况下，它使用非常基本的 Webpack+Babel 配置捆绑代码（可以省略；请参阅选项）。

用法： $ cra-append-sw [options] <file>

与 create-react-app 一起使用：

"start": "react-scripts start && cra-append-sw --mode dev ./custom-sw.js",
"build": "react-scripts build && cra-append-sw ./custom-sw.js", 

---

您也可以在生成的文件中手动添加代码（不使用 cra-append-sw），但每次构建项目时都需要这样做。

【讨论】：

我认为这是一个有用的工具，但不适用于我。我不想从几个脚本构建一个服务工作者，我想在我的 reactjs 代码中捕获fetch 并且感兴趣是否可能。