2

在 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 毫秒更长的时间来测试这一点。

Chrome 开发工具

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

4

1 回答 1

5

您需要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对象。

于 2015-11-25T11:17:09.120 回答