Cancel Previous Ajax Request and Start New One in Angularjs

Question

following solution is not working for me some how

How to cancel an $http request in AngularJS?

above solution effect - abort new ajax call also,it should be allow new ajax call and abort old ajax call

my code

$scope.callajax = function () {

        var canceller = $q.defer();


                    var data = {};
                        data['id'] = id;

                    $http({
                        method: "post",
                        url: url,
                        data: $.param(data),
                        timeout: canceller.promise,
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                    }).success(function (response) {

                    });


            canceller.resolve();


    };

i am calling this function,if i call this function two time at a time then it should be abort first ajax call and fire new ajax call

score 2 · Accepted Answer · answered May 19 '15 at 05:41

The problem with your code is that the canceller.resolve() gets called and cancels the $http immediately. The following works by flagging if an ajax call is active and cancelling the call.

JSFiddle

var canceller,
    isSending = false;

$scope.callajax = function () {
    console.log("callajax");
    if(isSending) {
        canceller.resolve()
    }
    isSending = true;
    canceller = $q.defer();

    var data = {
            html: "<p>Text echoed back to request</p>",
            delay: 5
        }
    $http({
        method: "post",
        url: "/echo/html",
        data: data,
        timeout: canceller.promise
    }).success(function (response) {
        isSending = false;
        console.log("success");
    }).error(function(data, status) {            
        isSending = false;
        console.log("error");
  });;
};

app.controller('SalesUserController', function ($scope, $compile, $http, $timeout, $filter) { _applyFunctions($scope, $compile, $http, $timeout, $filter); }); This my controller. — Jitendra Pancholi, Aug 31 '18 at 06:34

score 0 · Answer 2 · answered May 19 '15 at 05:40

Since, you have the cancelar object inside the function and also calling it, the callajax function will call and then cancel it everytime. To achieve what you want you should be trying something like this -

$scope.cancelHandles = [];
$scope.currentIndex=0;
$scope.callajax = function () {
   var cancelar = $q.defer();
   $scope.cancelHandles.push(cancelar);
   //rest of your code goes here except the last line cancelar.resolve();
   $scope.currentIndex = cancelHandles.length;
}
$scope.cancelAjaxCall = function(index) {
   cancelHandles[index].resolve();
}

The function call - callajax shall be returning the index in the array of cancel handlers which will map to the number of time you have called the ajax function. There is a separate function called cancelAjaxCall which will accept an index i.e. the nth number of ajax call which you want to cancel.

If you want to cancel the 3rd call from now in the past simply subtract 3 from the $scope.currentIndex and call the cancelAjaxCall function i.e. cancelAjaxCall($scope.currentIndex-3);

Cancel Previous Ajax Request and Start New One in Angularjs

2 Answers2