AngularJS：使用超时属性取消 $http 请求

Question

我已经看到很多关于这个主题的帖子，以及很多网络文章，但我仍然被我的问题所困扰。我发现this post 非常有用，但我的 timeoutRequest() 函数永远不会被调用。

我正在使用具有 $http 超时属性的承诺，但基础 HTTP 请求没有被取消。我认为承诺本身正在解决，但请求并未取消。

我的控制器行为如下所示：

$scope.enquiriesSelected = function() {
    $scope.cancelHttpRequests();
    $location.path("/enquiries");
};

$scope.cancelHttpRequests = function () {
    console.log(canceller.promise.$$state);
    canceller.resolve("User cancelled");
    console.log(canceller.promise.$$state);
};

我的 HTTP 请求承诺如下所示：

var canceller = $q.defer();

$scope.searchResultsPromise = $http({
        url: "/api/customers/customersearch",
        method: "POST",
        data: criteria,
        timeout: canceller.promise 
    })
    .success(function(data) {
        $scope.customerSearchResults = data;
    });

我已经尝试了各种方法来让它工作，包括将取消器放在 $scope 中。

我一直在查看 AngularJS 源代码，发现以下几行：

if (timeout > 0) {
    var timeoutId = $browserDefer(timeoutRequest, timeout);
} else if (isPromiseLike(timeout)) {
    timeout.then(timeoutRequest);
}

function timeoutRequest() {
    jsonpDone && jsonpDone();
    xhr && xhr.abort();
}

但是，当我的承诺得到解决时，执行路径没有到达这些行。 xhr.abort() 永远不会被调用，这是 AngularJS 源代码中唯一中止 HTTP 请求的地方。

在尝试取消请求时使用 F12 (Chrome) 中的控制台进行检查会发现，promise 的 $$state 从 0 变为 1，因此我有理由确定 promise 正在解决。然而，在网络流量中，HTTP 请求并没有被取消。在 HTTP 请求完成之前，我无法导航到另一个页面。

谁能帮忙？

M

Answer 1

您所描述的实际上是使用timeout 属性取消$http 请求的正确方法。我创建了this Plunkr，它展示了这种行为与您提供的代码尽可能接近。您可以看到，当单击“Submit request with timeout”按钮时，会提交请求，并且在 100 毫秒后解决超时承诺（因为请求返回的速度如此之快，以至于您真的没有时间单击某些内容来取消它） ：

$scope.requestWithTimeout = function() {
  $timeout(function(){canceller.resolve("User cancelled");}, 100);
  $scope.submitRequest();
}

$http 请求错误回调检查响应的状态并显示适当的错误消息，您可以在其中看到请求实际上在 100 毫秒后被取消。您还可以通过观察浏览器开发者工具的网络选项卡中的请求来验证这一点。

$scope.submitRequest = function() {
    // Reset the canceler promise
    canceller = $q.defer();
    $scope.status = 'Request submitted';
    var startTime = (new Date()).getTime();
    $http({ 
      url: 'style.css',
      method: 'GET',
      timeout: canceller.promise 
    })
    .success(function(data) {
      var endTime = (new Date()).getTime();
      $scope.status = 'Request response returned after ' + (endTime - startTime) + ' msec.';
    })
    .error(function(data, status) {
      var endTime = (new Date()).getTime();
      if(status === 0) {
        $scope.status = 'Request timed out after ' + (endTime - startTime) + ' msec.';
      } else {
        $scope.status = 'Request returned with error after ' + (endTime - startTime) + ' msec.';
      }
    });
  }

希望您可以以此为例来找出您的代码有什么问题并加以纠正。否则，请使用不起作用的代码创建一个 Plunkr（或类似的东西），以便我可以进一步帮助您。