title: Cancel / Abort all pending requests in angularJs
body: <p>On route change, I need to abort ALL pending requests from previous route so that I don't run into problems of responses from previous route messing up data on my current route (it happens sometimes when responses from previous route take long time to finish).</p>
  
  <p>I have thought about using <a href="https://docs.angularjs.org/api/ng/service/$http" rel="nofollow noreferrer">http interceptor</a> for this: </p>
  
  <pre><code>$httpProvider.interceptors.push(function($q) {
      return {
       'request': function(config) {
  
        },
  
        'response': function(response) {
  
        }
      };
    });
  </code></pre>
  
  <p>In the request function, I could modify the <code>config.timeout</code> with a promise as suggested <a href="https://stackoverflow.com/questions/13928057/how-to-cancel-an-http-request-in-angularjs">here</a> and store all the deferred objects in a global cache so that I could cancel all of them.</p>
  
  <p>The problem with this approach is that it may <strong>override</strong> <code>config.timeout</code> set in other places in the code.</p>
  
  <p>I think another solution could be to cancel all ajax requests at <code>XMLHttpRequest</code> level, but I don't know how to do it. </p>
  
  <p>Any suggestions? Thanks.</p>