Is there a way to properly cancel an $https request in Angular when a new request is triggered? Despite using allMarkersRequest.abort(), the pending request still shows up in Chrome's dev tool. What am I missing?
In the code snippet below, allMarkersRequest.abort() should be triggered when allMarkersRequest is not null. However, even after calling deferredAbort.resolve(), it seems like the program still proceeds with .then().
var allMarkersRequest = null;
function getAllMarkersForSearch() {
if (allMarkersRequest) {
allMarkersRequest.abort();
console.log('Aborting all markers request');
}
var deferredAbort = $q.defer();
var url = Routing.generate('ajax_search_geo_all_markers');
var req = $http({
method: 'POST',
url: url
});
allMarkersRequest = req.then(function (data) {
createMarkers(data.data);
$rootScope.$broadcast('map:markers:updated', markers);
}, function (error) {
// Display error message
});
allMarkersRequest.abort = function() {
deferredAbort.resolve();
};
allMarkersRequest.finally(function () {
allMarkersRequest.abort = angular.noop;
deferredAbort = req = allMarkersRequest = null;
});
}