clear all pending $http requests and reload page in angularjs

Question

i tried $route.reload(); location.reload(true); $window.location.reload(true);but pending requests are not cancelling/aborting, page is reloading, how to hard reload page means closing all $http requests which are pending and reloading page.

Answer 1

This should do the trick for you. You'll need to call the abortAllPendingRequests method when you want to cancel your requests.

Please keep in mind that this solution does require the use of underscore. I haven't tried it with lodash.

(function ()
{
  angular.module('myApp')
    .run(function ($http, $q)
    {
      $http.currentlyPendingRequests = [];

      $http.accessPendingRequests = function (pending)
      {
        if (!arguments.length) return this.currentlyPendingRequests;
        this.currentlyPendingRequests = pending;
      };

      $http.removeRequest = function (requestUrl)
      {
        this.currentlyPendingRequests = _.filter(this.currentlyPendingRequests, function (request)
        {
          return request.url !== requestUrl;
        }, this)
      };

      $http.abortAllPendingRequests = function ()
      {
        _.each(this.currentlyPendingRequests, function (request)
        {
          request.aborter.resolve();
        });

        this.currentlyPendingRequests = [];
      };

      var originalGet = $http.get;

      $http.get = function ()
      {
        // Ignore template requests
        if (arguments[0].indexOf('.html') != -1)
        {
          return originalGet.apply(this, arguments)
        };

        var aborter =  $q.defer();
        var url     = arguments[0];

        this.currentlyPendingRequests.push({url : url, aborter : aborter});
        console.log('pushing url : ' + url);

        // Include the abortion promise in the new arguments
        var newArgs        = [arguments[0], _.extend({}, arguments[1], {timeout : aborter.promise})];
        var requestPromise = originalGet.apply(this, newArgs);

        // Finally is a reserved word and is not es3 compatible, and therefore non compliant for ie8. Thus the hash
        // syntax must be used.
        requestPromise['finally'](function()
        {
          this.removeRequest(url);
        });

        return requestPromise;

      }
    });
})();