传递错误类型的服务工作者获取事件

Question

我像这样添加一个获取事件监听器

self.addEventListener( 'fetch', fetch )

这是我的获取函数

const fetch = e => {
    console.log({e})
    if ( !e.request.url.startsWith( self.location.origin ) || e.request.method !== 'GET' ) return

    const save = async res => {
        const cache = await caches.open( dynamic )
        cache.put( e.request, res )
    }

    const process = async cached => {
        if ( cached ) return cached
        const res = await fetch( e.request.clone() )
        if ( res ) await save( res.clone() )
        return res
    }

    e.respondWith( caches.match( e.request ).then( process ))
}

当我查看正在传递的事件时，我期望获取事件，但这是我所看到的

它在正确的 Fetch 事件之后打印请求对象。当我尝试访问 url 时，它当然会抛出错误，因为它会有效地执行 request.request.url

Answer 1

在您的 process 方法中，您使用克隆的请求调用 fetch 函数，这可能是您在控制台中看到的 Request。

const res = await fetch( e.request.clone() )

这个问题是因为您的自定义方法被称为 fetch，但在这种情况下您可能想使用本机 fetch 方法。也许您应该考虑重命名您的自定义方法以防止发生此类冲突。

传递错误类型的服务工作者获取事件

Service worker fetch event passing in wrong type

javascript

service-worker