title: nested fetch for a response in a service-worker
body: <p>I'm new to service-worker. I'm following a training of <strong>Mobile Web Specialist</strong> given by Udacity and I'm using google-chrome for that.
  I want to fetch for a response from the network, and if it returns 404 as a status I fetch for another response from the network as well.
  This is a code to fetch from the network only once. This code works perfectly:</p>
  
  <pre><code>self.addEventListener('fetch', function(event) {
    event.respondWith(
      fetch(event.request).then(function(response) {
        if (response.status === 404) {
          return new Response("Whoops, not found");
        }
        return response;
      }).catch(function() {
        return new Response("Uh oh, that totally failed!");
      })
    );
  });
  </code></pre>
  
  <p>I did some updates on this code by throwing an error after getting <code>response.status === 404</code> and manage it the same way in a <code>try/catch</code>. The updated code is below:</p>
  
  <pre><code>self.addEventListener('fetch', function(event) {
   try {
    event.respondWith(
      fetch(event.request).then(function(response) {
        if (response.status === 404) {
          throw (Error);
        }
        return response;
      }).catch(function() {
        return new Response("Uh oh, that totally failed!");
      })
    );
   } catch (Error) {
     event.respondWith(
      fetch('/imgs/dr-evil.gif').then(function(response) {
        if (response.status === 404) {
          return new Response('couldn\'t fetch twice');
        }
        return response;
      }).catch(function() {
        return new Response("Uh oh, that totally failed twice!");
      })
    );
   }
  });
  </code></pre>
  
  <p>I know there is a better way to do a nested fetch using the service-worker, but I want to know what I did wrong here.</p>