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方法返回的数据不同。

弃用通知

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

angular $ http如何防止以前的响应覆盖以后的响应？

2 个答案: