Javascript 在service worker中捕获请求并使用不同的图像url进行响应

我的服务人员中有这个fetch函数，当pwa脱机时，我尝试用不同的映像进行响应。catch内的fetch函数抛出：Uncaught（in promise）TypeError:未能获取

self.addEventListener('fetch', (e) => {
  if (e.request.method === 'GET') {
    e.respondWith(
      caches.match(e.request).then((cachedResponse) => {
        return cachedResponse || fetch(e.request.url)
          .then((res) => {
            return res;
          }).catch(() => {
             //if it is a image then
            let url1 = e.request.url.replace(".jpg", "_mini.jpg");
            return fetch(url1);
            /* Or like this
            caches.match(url1).then((cResp) => {
            return cResp;
            })
           */
          })

      })
    )
  }
});

---

当您脱机时，是否不可能捕获错误并用“迷你”alternativ映像进行响应？或者我做错了什么？

您正在返回

cachedResponse

，如果它存在，则会阻止您的替换逻辑。尝试删除

缓存响应| |

这也可以删除：

.then((res) => {
    return res;
})

另外，如果您脱机，则返回fetch（url1）不起作用，因为从服务工作人员处获取的

不会递归触发另一个
FetchEvent
。因此，您必须
返回caches.match（url1）
，这意味着它以前被缓存过。
请定义“它不工作”。它会给出一个错误吗？产生错误的图像？显示空白页？使程序无误地崩溃？使页面无限加载？“它不起作用”是诊断此代码中问题的尽可能少的有用详细信息。获取（url1）失败的原因是：Uncaught（in promise）TypeError:Failed to fetch。但正如@guerricp所说，这是因为fetch不能脱机工作。