如何在AngularJS中取消挂起的请求

How to cancel pending requests in AngularJS?

本文关键字：挂起 请求 取消 AngularJS      更新时间：2023-09-26

我有一个输入字段。当这个字段上有一个keyup时，我用AJAX和angular的$http服务发送一个请求。我的问题是，当触发另一个keyup事件时，我需要取消所有挂起的请求。我已经看到了很多答案，但我还没有找到解决方案。

我尝试了两件事：

我称之为的服务

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

它不太好用。

这个：

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

这将在发送所有请求之前取消这些请求。

你能帮我吗？

由于您注册的是一个工厂，而不是一个服务，您不必使用"this"，因此您的函数不会被视为构造函数，也不会使用new关键字。

您需要一个服务，在每个启动的请求上维护一个消除器，并在发送另一个时取消前一个请求

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

你甚至不需要一个中间的取消器，可以使用与取消器相同的先前请求

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
 };
});
相关文章：