javascript - 服务 worker 和 promise : Correct Response not returned

Question

在 Service Worker 中，我使用以下代码来测试外部 JavaScript 文件的返回时间是否超过 500 毫秒。下面的代码还使用 Promise 竞争条件来确定网络是否更快或超时。如果超时成功，那么我希望返回 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 毫秒更长的时间来对此进行测试。

超时每次都获胜并记录到控制台，这正是我所期望的。但是，它没有按预期返回 408，而是返回 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

你需要在 promise 之外执行 event.respondWith:

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

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 函数以返回响应，因此 Promise.race 将返回一个 Response 对象。