respondWith注意事项

最新推荐文章于 2024-12-17 09:15:29 发布

张子虚

最新推荐文章于 2024-12-17 09:15:29 发布

阅读量636

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/ccaoee/article/details/123995078

JavaScript 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了如何在ServiceWorker中使用respondWith方法拦截请求，让Worker能够根据需求返回自定义响应。重点讲解了fetch事件处理器的使用和路径匹配规则，以及无显式调用respondWith时请求的流向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

respondWith

拦截请求并允许Worker发送自定义响应。

respondWith方法仅在worker域(WorkerGlobalScope)中有效
使用Module Worker格式，直接从处理程序返回一个Response。

如果fetch事件处理器没有调用respondWith方法，那么运行时将会将该事件传播到下一个注册为fetch事件的处理器中。因此，添加多个fetch事件的处理器是可行的，但是不推荐这样做。

如果没有任何的fetch事件处理器来显式地调用respondWith方法，那么运行时会将该请求导向源位置，就像不存在Worker逻辑一样。
然而，如果没有源或者Worker本身就是你的源服务器，那么你必须调用respondWith来获得有效的响应。


// Format: Service Worker
addEventListener('fetch', event => {
  let { pathname } = new URL(event.request.url);

  // Allow "/ignore/*" URLs to hit origin
  if (pathname.startsWith('/ignore/')) return;

  // Otherwise, respond with something
  event.respondWith(handler(event));
});