ServiceWorker 向 FetchEvent.respondWith() 传递了一个承诺，该承诺以非响应值“未定义”解决。浏览器同步

Posted 2023-03-05

【中文标题】ServiceWorker 向 FetchEvent.respondWith() 传递了一个承诺，该承诺以非响应值“未定义”解决。浏览器同步

【英文标题】：A ServiceWorker passed a promise to FetchEvent.respondWith() that resolved with non-Response value ‘undefined’. Browser-sync

【发布时间】：2017-10-12 20:46:21

【问题描述】：

有时当我运行我的服务器时，控制台会给我一个错误：

加载失败 'http://localhost:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=Lm2wn4p'。 一个 ServiceWorker 向 FetchEvent.respondWith() 传递了一个承诺 使用非响应值“未定义”解析。

我不知道发生了什么，

服务工作者.js：

importScripts('assets/js/cache-polyfill.js');

var CACHE_VERSION = 'app-v1';
var CACHE_FILES = [
    'index.html'
];

self.addEventListener('install', function (event) 
    event.waitUntil(
        caches.open(CACHE_VERSION)
            .then(function (cache) 
                console.log('Opened cache');
                return cache.addAll(CACHE_FILES);
            )
    );
);

self.addEventListener('activate', function (event) 
    event.waitUntil(
        caches.keys().then(function(keys)
            return Promise.all(keys.map(function(key, i)
                if(key !== CACHE_VERSION)
                    return caches.delete(keys[i]);
                
            ))
        )
    )
);

self.addEventListener('fetch', function (event) 
    event.respondWith(
        caches.match(event.request).then(function(res)
            if(res)
                return res;
            
            requestBackend(event);
        )
    )
);

function requestBackend(event)
    var url = event.request.clone();
    return fetch(url).then(function(res)
        //if not a valid response send the error
        if(!res || res.status !== 200 || res.type !== 'basic')
            return res;
        

        var response = res.clone();

        caches.open(CACHE_VERSION).then(function(cache)
            cache.put(event.request, response);
        );

        return res;
    )

有什么想法或解决方案吗？

【参考方案1】：

这不是修复，而是解决方法

您可以取消注册服务工作者，以便网页重新加载/刷新缓存。

here 是您在 Firefox 上的操作方式。

here 是你可以在 chrome 上做的事情

【参考方案2】：

只是缺少return 关键字:)

当在缓存中找到请求时，您返回响应，太好了！但是当没有缓存时，您没有 return 语句，该语句最终会从您的 requestBackend 函数返回正确的响应，这就是导致问题的原因。

self.addEventListener('fetch', function (event) 
    event.respondWith(
        caches.match(event.request).then(function(res)
            if(res)
                return res;
            
            return requestBackend(event);
        )
    )
);

速记：

caches.match(event.request).then(function(res)
  return res || requestBackend(event);
)