如何在 javascript 中将函数放入 event.respondWith() 中以返回响应

Question

我有一个服务工作者，如果它是某种类型，它应该返回缓存的文件。如果没有，它应该获取资源。我将检查文件是否为某种类型的代码放在 fetch 函数中。如果是，则返回缓存的版本。如果不是，则返回获取的版本。但我发现，它发送一个网络请求来获取，然后返回缓存的版本（废话）。我不想要这个，因为它取消了提供大文件的缓存版本而不是在可能的情况下获取它的目的。我意识到我必须将 if then 语句放在获取之外，但这意味着我将其作为参数放入。这是一个问题，因为它会引发错误。所以，我决定将它放在一个函数中。这会返回无效响应，所以我不知道我做错了什么。肯定是 event.respondWith() 内部的函数不能返回，但为什么呢？我的代码是：this.addEventListener("fetch", function (event) {    event.respondWith(function(){        //if the event request is a music file (I have it stored in a folder named music, so if the request is like "music/musicfile.mp3"), then returned the cached version. If not, fetch the file over the network.         if(event.request.url.match(/music\//)){            return caches.match(event.request).then(function(r){                if(r){                    return r;                }                else{                    return fetch(event.request).then(function(fetchR){                        return fetchR;                    });                }            });        }        else{            return fetch(event.request).then(function(res){                return res;            }).catch(function(){                return caches.match(event.request).then(function(cacheRes){                    if(cacheRes){                        return cacheRes;                    }                    else{                        return new Response("Error",{status : 520, statusText : "Error fetching cache", headers :new Headers({"Content-Type":"text/html"})});                    }                });            });        }    }    );});我知道这可能不是最好的方法，但如果有其他方法，我很乐意改进它以获得最佳实践。

Answer 1

我找到了如何做到这一点。由于 event.respondWith() 接受响应而不是函数，因此如果您给它一个函数，它会将其视为响应，但不会运行它。您所要做的就是调用 IIFE（立即调用函数表达式），这样您的函数就会被执行并返回响应。IIFE 语法：

(function{

   console.log("I was run immediately after I was created!");

})();