简体   繁体   English

如何在AngularJS中取消待处理的请求?

[英]How to cancel pending requests in AngularJS?

I have an input field. 我有一个输入字段。 When there is a keyup on this field, I send a request with AJAX and $http service of angular. 当这个字段有一个keyup时,我发送一个带有AJAX和$ http服务的请求。 My problem is when another keyup event is triggered, I need to cancel all pending requests. 我的问题是当触发另一个keyup事件时,我需要取消所有待处理的请求。 I have seen a lot of answers, but I have not found a solution. 我看到了很多答案,但我还没有找到解决方案。

I tried two things : 我尝试了两件事:

A service that I call 我打电话的服务

App.factory('findArticlesService', function($http, $q) {
   var self = this;
   self.canceller = null;

   return {
       getArticles: function(route, formData) {
           if (self.canceller) {
               self.canceler.resolve("Other request is pending");
           }

           var deferred = $q.defer();
           self.canceller = $q.defer();

           $http.post(route, angular.toJson(formData), {timeout: self.canceller.promise}).success(function(data) {
                deferred.resolve({data: data}); 
           });

           return deferred.promise;
       }
   };
});

App.controller('mainCtrl', ['$scope', '$http', '$q', 'findArticlesService', function($scope, $http, $q, findArticlesService) {
    var res = findArticlesService.getArticles(route, $scope.formData);
    console.log(res);
}]);

It doesn't work well. 它不能很好地工作。

And this : 还有这个 :

var canceller = $q.defer();
canceller.resolve();

$http.post(route, angular.toJson($scope.formData), {timeout: canceller.promise}).then(function(data) {...});

This cancel all requests before they are sent. 这将在发送之前取消所有请求。

Can you help me ? 你能帮助我吗 ?

Since you are registering a factory and not a service you don't have to use 'this', your function is not going to be treated/instanciated as a constructor, with new keyword. 由于您正在注册工厂而不是服务,因此您不必使用“this”,因此您的函数不会被视为构造函数,而是使用new关键字。

you need a service that maintains a canceller on every initiated request and cancels the previous request if another is sent 您需要一个服务,在每个发起的请求上维护一个取消器,并在发送另一个请求时取消之前的请求

App.factory('findArticlesService', function($http, $q) {
  var canceller;

   return {
       getArticles: function(route, formData) {
           if (canceller) {
               canceller.resolve("Other request is pending");
           }
           canceller = $q.defer();

           return $http.post(route, angular.toJson(formData), {timeout: canceller.promise});

       }
   };
});

You don't even need an intermediary canceler, can use the same previous request as canceler 您甚至不需要中间取消器,可以使用与取消器相同的先前请求

App.factory('findArticlesService', function($http) {
  var canceler,
      getArticles = function (route, formData) {
        if (canceler) {
          canceler.resolve('aborted');
        }
        canceler = $http.post(route, angular.toJson(formData), {timeout: canceler.promise});
        return canceler;
      };

  return {
   getArticles: getArticles
 };
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM