AngularJS - 取消返回 Promise 的 Service 中的 HTTP 请求

Question

我有一个类似于以下的服务方法：

this.myServiceFunction = function(){
    var deferred = $q.defer();
    $http({
        method: 'GET',
        url: 'domain/myendpoint'
    })
        .success(function(data){
            deferred.resolve(data);
        })
        .error(function(data){
            deferred.reject(data);
        });
    return deferred.promise;
};

我会根据以下方式在我的控制器中使用这种方法：

我在控制器中使用以下方法：

$scope.myControllerFunction = function(){
    myService.myServiceFunction().then(function(){
        // Do things when promise resolves
    });
};

我希望在另一个命令函数中取消上面的HTTP调用。我发现这个答案允许您通过在从$q.defer()返回的对象上调用resolve()方法来取消HTTP请求。但是在我的代码库中，该对象在我的控制器中不可用。

在上面的示例中，myService.myServiceFunction()返回从$q.defer()返回的promise对象。如何在我的限制条件下取消HTTP请求？

- Lloyd Banks

---

请参考关于此主题的之前的问题。 - Mark S.

@MarkS. 你看了这个问题吗？ - Lloyd Banks

为什么你不使用 RxJs 呢？ - Hosar

可能是重复的问题：如何在AngularJS中取消$http请求？ - Estus Flask

Answer 1

以下回答问题，不包含原始代码中的开销。

this.myServiceFunction = function(){
  this.canceler = $q.defer();
  return $http({
    method: 'GET',
    url: 'domain/myendpoint',
    timeout: this.canceler.promise   
  });
};

this.cancelServiceFunction = function() {
  return this.canceler.resolve();
};

如果你必须使用该模式，可以使用以下方法：

this.myServiceFunction = function(){
  this.canceler = $q.defer();
  this.deferred = $q.defer();

  $http({
    method: 'GET',
    url: 'domain/myendpoint',
    timeout: this.canceler.promise   
  })
  .success(function(data){
    deferred.resolve(data);
  })
  .error(function(data){
    deferred.reject(data);
  });

  return deferred.promise;
};

this.cancelServiceFunction = function() {
  return this.canceler.resolve();
};

- Seth Flowers

---

这是我参考链接中提供的相同答案。这要求我更改myServiceFunction()的返回对象，而我不想这样做。这是我代码库中普遍存在的一种模式，更改它将需要在控制器中进行大量的下游更改。 - Lloyd Banks

@LloydBanks 这并不会改变 myServiceFunction() 的返回对象（除非你想在控制器中使用旧的 success 和 error 回调函数）。他只是移除了多余的 var deferred = $q.defer(); 并添加了一个取消令牌。你可以像平常一样在控制器中进行操作，而无需更改任何字符。 - Nikolaj Dam Larsen

我只是想清理你的代码，以减少额外开销。我会更新我的答案以提供您想要的内容。 - Seth Flowers