在 AngularJS 中处理不再需要的异步数据

Question

情况是这样的：您有一个用户在您的 AngularJS 应用程序上输入垃圾邮件，这当然会在后端创建各种异步数据调用。问题是，随着这些数据提取中的每一个返回，用户将在屏幕上看到数据多次更改，希望用户最终停留的数据是最后出现的数据，所以这就是他们看到的数据。

但我们不能指望这一点，因为异步意味着无法保证顺序。很有可能页面 C 的数据先于页面 B 的数据到达，而用户没有等待显示就跳过了。现在，用户看到了页面 B 的数据，因为最后返回的是页面 B，但他们认为他们看到的是页面 C。我们如何防止这种情况发生？

Answer 1

解决这个问题的方法很简单：使用令牌！每个承诺在创建时都会携带令牌的本地副本，并将检查主令牌以确保它仍然相关：

var self = this;

// our token generator
self.generateToken = function() { 
    return return Math.floor(100000000 + Math.random() * 900000000);
}

// our latest token
self.getData = function() {
    self.asyncToken = self.createToken();
    var myToken = self.asyncToken;

    var request = $http({url: "http://google.com"});
    var promise = request.then(function(response) {
        if (myToken !== self.asyncToken) {
            console.log("Got data for expired request.  Ignoring.");
            return;
        }
        // this is data we wanted, so we continue
        self.doStuff(response.data);
    });

    return promise;
};

Answer 2

$http 接受取消器参数，这是一个可用于取消先前请求的承诺。当您要提出新请求时，您会想要取消该请求。这是一个基本的例子。请注意，最佳做法不建议在您的控制器中使用 $http。

var canceller = $q.defer();
 
$http.get("/api/movies/slow/2", { timeout: canceller.promise })
     .then(function(response){
        $scope.movie = response.data;
    });
 
$scope.cancel = function(){
    canceller.resolve("user cancelled");  
};

在此处阅读更多内容：http://odetocode.com/blogs/scott/archive/2014/04/24/canceling-http-requests-in-angularjs.aspx

在 AngularJS 中处理不再需要的异步数据

Handling no longer needed async data in AngularJS

javascript

asynchronous

angularjs