Cancel Request in AngularJS

Question

I gone through some links:

How to cancel an $http request in AngularJS?

Cancelling ongoing Angular $http requests when there's a new request

How to cancel a $http call from controller in Angular JS?

http://embed.plnkr.co/gkvxRj/

But didn't work in my code

How can I cancel previous request? Below in my request service code.

function PostData (url, data,cancelPrevious, auth, token, headers) {
            var deferred = $q.defer();
            token = token || window.apiToken;
            headers = headers || {};
            if (cancelPrevious && $http.pendingRequests.length > 0) {
                deferred.resolve('cancel');
                var deferred = $q.defer();
                var newPostData = data ? JSON.stringify(JSON.parse(data)) : null;
                $http({
                    method: "POST",
                    url: url,
                    headers: headers,
                    data: newPostData
                }).then(function (response) {
                    deferred.resolve(response.data);
                }),
                    function (data) {
                        deferred.resolve(data);
                    };

                return deferred.promise;
            } else {
                var newPostData = data ? JSON.stringify(JSON.parse(data)) : null;
                $http({
                    method: "POST",
                    url: url,
                    headers: headers,
                    data: newPostData
                }).then(function (response) {
                    deferred.resolve(response.data);
                }),
                    function (data) {
                        deferred.resolve(data);
                    };

                return deferred.promise;
            }
            
        };

Using - 
Service.PostData(config.apiBaseUrl + "Monitoring/GetAllSpotLines", JSON.stringify(postData), true)

I am using 'cancelPrevious' flag to cancel request if any request pending in $http.pendingRequests array.

I have clearly checked that it is entering that condition but deferred.resolve('cancel') not working

Answer 1

You can store the earlier promise object in another variable and when you found pending request greater than 0 then you can resolve the pending promises. See the updated code:

var pendingDeferred;
function PostData (url, data,cancelPrevious, auth, token, headers) {
            var deferred = $q.defer();
            token = token || window.apiToken;
            headers = headers || {};
            if (cancelPrevious && $http.pendingRequests.length > 0 && pendingDeferred) {
                
                pendingDeferred.resolve('cancel');                
                pendingDeferred = deferred;
                var newPostData = data ? JSON.stringify(JSON.parse(data)) : null;
                $http({
                    method: "POST",
                    url: url,
                    headers: headers,
                    data: newPostData
                }).then(function (response) {
                    deferred.resolve(response.data);
                }),
                    function (data) {
                        deferred.resolve(data);
                    };

                return deferred.promise;
            } else {
                pendingDeferred = deferred;
                var newPostData = data ? JSON.stringify(JSON.parse(data)) : null;
                $http({
                    method: "POST",
                    url: url,
                    headers: headers,
                    data: newPostData
                }).then(function (response) {
                    deferred.resolve(response.data);
                }),
                    function (data) {
                        deferred.resolve(data);
                    };

                return deferred.promise;
            }
            
        };

I have stored the earlier promise in "pendingDeferred" variable and next time if pending request found then resolving the pending promise.