在Angularjs中取消以前的Ajax请求并启动新的Ajax请求

时间:2015-05-19 04:57:33

标签: angularjs angularjs-http

以下解决方案对我不起作用

How to cancel an $http request in AngularJS?

上面的解决方案效果 - 中止新的ajax调用也应该允许新的ajax调用并中止旧的ajax调用

我的代码

$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();


    };

我正在调用此函数,如果我一次调用此函数两次则应该首先中止ajax调用并激活新的ajax调用

2 个答案:

答案 0 :(得分:2)

您的代码存在的问题是canceller.resolve()被调用并立即取消$ http。以下工作方式是标记ajax呼叫是否处于活动状态并取消呼叫。

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");
  });;
};

答案 1 :(得分:0)

因为你在函数内部有一个cancelar对象并且还调用它,所以callajax函数会调用然后每次都取消它。为了实现你想要的东西,你应该尝试这样的事情 -

$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();
}

函数调用 - callajax应返回取消处理程序数组中的索引,该数组将映射到调用ajax函数的时间。 有一个名为cancelAjaxCall的独立函数,它接受一个索引,即你要取消的第n个ajax调用。

如果您想从现在开始取消第3次通话,只需从$scope.currentIndex中减去3,然后拨打cancelAjaxCall功能即cancelAjaxCall($scope.currentIndex-3);