我如何听服务工人中的请求中止事件？ 我正在用Axios获取一些数据，并在PWA中做出反应。如果在第一个呼叫仍在进行中，我将流产控制器编程为中止呼叫。 而通话...

Question

当应用程序对服务工作者的呼叫定期取消，而服务工人到服务器的呼叫始终得到满足。

这里是一个例子：

 // app
  useEffect(() => {
    const controller = new AbortController();

    axios.get<any, IInstance[]>('/instances',
      { signal: controller.signal })
      .then(data => setInstancesState(data));

    return () => {
      controller.abort();
    };
  }, [foo]);

// service-worker
self.addEventListener("fetch", (event) => {
  const url = (new URL(event.request.url));
  console.log(event.request.signal.aborted); // Always false
  event.respondWith(fetch(event.request));
});

如何将请求堕胎从应用程序拦截到服务工作人员？

Axios提出

XHR

请求。确保XHR请求可以使用所有浏览器拦截。

可以响应同步XHR请求的服务工作人员吗？

ihighly

Answer 1

.

一起使用。 服务工作者中的流产请求，我不得不提到它是由使用effect中的AportController实例控制的，而不是在请求中。 您必须使用

addEventListener('abort', (event) => { })

或使用您的实例。但是他们都无法在服务工作人员中访问。 有关更多信息，请阅读：

Babortevent 授予财产

this Chrome文章

描述了如何传播流产事件。您需要将信号连接到此新提取请求中，因此：

addEventListener('fetch', event => {
    const url = new URL(event.request.url);

    if (event.request.method == 'GET' && url.pathname == '/about/') {
    // Modify the URL
    url.searchParams.set('from-service-worker', 'true');
    // Fetch, but pass the signal through
    event.respondWith(
        fetch(url, { signal: event.request.signal })
    );
    }
});