服务工人＆amp;承诺：没有返回正确的回复

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

您需要在承诺内执行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个对象。