Service Workers & Promises：未返回正确响应

Question

在 Service Worker 中，我使用以下代码来测试外部 JavaScript 文件是否需要超过 500 毫秒才能到达 return。下面的代码还使用 Promise 竞争条件来确定网络是否更快或超时。如果超时成功，那么我希望 return 408 响应。

function timeout(delay) {
    return new Promise(function(resolve, reject) {
        setTimeout(function(){
          new Response('', {
              status: 408,
              statusText: 'Request timed out.'
          });
        }, delay);
    });
}

self.addEventListener('fetch', function(event) {
    // Only fetch JavaScript files for now
    if (/\.js$/.test(event.request.url)) {
      event.respondWith(Promise.race([timeout(500), fetch(event.request.url)]));
    } else {
      event.respondWith(fetch(event.request));
    }
});

我正在通过使用开发工具限制网络连接并强制它花费比设置的 500 毫秒更长的时间来对此进行测试。

每次都超时并记录到控制台，这正是我所期望的。但是，它并没有像预期的那样 return 408，而是 return 200。有什么想法吗？

您可以在 Github 上看到一个这样的例子： https://deanhume.github.io/Service-Workers-Fetch-Timeout/

和来源：

https://github.com/deanhume/Service-Workers-Fetch-Timeout/blob/gh-pages/service-worker.js

Answer 1

您需要执行 event.respondWith 不在 promise 内：

（没有尝试过这段代码，只是即时执行）

function timeout(delay) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
          resolve(new Response('', {
              status: 408,
              statusText: 'Request timed out.'
          }));
        }, delay);
    });
}

self.addEventListener('fetch', function(event) {
    // Only fetch JavaScript files for now
    if (/\.js$/.test(event.request.url)) {
      event.respondWith(Promise.race([timeout(500), fetch(event.request.url)]);
    } else {
      event.respondWith(fetch(event.request));
    }
});

还修改了 timeout 函数以 return 响应，因此 Promise.race 将 return 一个 Response 对象。

Service Workers & Promises：未返回正确响应

Service Workers & Promises: Correct Response not returned

javascript

es6-promise

service-worker

progressive-web-apps