angular $ http如何防止前一个响应覆盖后一个响应？

Question

我在我的项目中使用angularjs。 我遇到一个问题。 页面上有两个按钮A和B，它们调用相同的功能，该功能从服务器获取远程数据。 当我单击A然后单击B时，它将发送两个请求，但有时请求B会比请求A早返回，因此最后我在页面上呈现了请求A的数据，我应该在请求B中呈现数据。现在，我有以下解决方案：

app.controller("controller", function($scope) {
    $scope.lastTimeStamp = null;
    $scope.getData = functio() {
        $scope.lastTimeStamp = new Date().getTime();
        var temp = angular.copy(t);
        $http({}).success(function() {
            if($scope.lastTimeStamp == temp) {
                // this is the data from last request
            }
        })
    }
});

每次调用$ scope.getData（）时，我用相同的值更新$ scope.lastTimeStamp和var temp，以确保$ scope.lastTimeStamp是实际的最后一个，并在回调中将其与temp进行比较。 这可行。 但是这种情况很常见，这是我的项目，如果以这种方式解决，那么每次我需要执行的操作都与业务逻辑无关时。 所以我想知道是否有通用的解决方案来解决这个问题？ 有什么帮助吗？

Answer 1

您永远不知道请求何时会返回响应。 因此，您必须使用诺言。 Angular为该海豚提供了$ q服务。 因此，您可以创建变量来保存A的承诺，并在其返回时运行方法B的请求。但这有一些副作用。 如果用户单击B而从不单击A，会发生什么情况？

//控制器

var deferA;

$scope.methodA = function () {
  deferA = $q.defer();
  $http('service-a-url').then(function (response) {
    // render your response 
    deferA.resolve(reponse);
  }, function (error) {
    // notify about the error
    deferA.reject(error);
  });
}


$scope.methodB = function () {
  if (deferA) {
    $q.when(deferA).then(function () {
      $http('service-b-request').then(function () {
        // render your data
      });
    });
  }
}

您也可以使用$q.all

Answer 2

保存从以前的点击链从这个承诺。

var vm = $scope;  
vm.prevClickPromise = $q.when(0);

vm.doClick = function doClick(someRequest) {        
    vm.prevClickPromise = vm.prevClickPromise.then ( function () {
        //Make and return Http request
        return $http(someRequest);
    }) .then (function (response) {
        //render data
        vm.data = response.data;
    }) .catch (function (error) {
        //log error
    })
};

通过链接上次单击的承诺，后续的$ http请求将等待，直到先前的$ http请求已解决，并带有数据或错误。 如果先前的请求已解决，则随后的请求将立即开始。

请注意，数据与返回的不同.then比方法.success方法。

弃用通知

$http服务的.success和.error方法已被弃用。 有关.success和.error方法的弃用（或应该说失败）的更多信息，请参见AngularJS $http Service API Reference 。