在AngularJS中处理多个异步调用和范围更新的最佳方法

Question

我面临一个困难的情况，我必须根据UI上的各种过滤器过滤掉搜索结果。

每当我进行搜索时，都会有一个api调用来异步加载结果。 用户甚至可以在加载先前搜索条件的结果之前过滤任何次数。

httpService.get("getCREWRequests.do", filters.getValues()).then(function(data){
        $scope.requests=data;
});

我只是用来自api的不同结果更新范围，并在屏幕上显示它们。

但是，由于api调用是异步的，因此不同搜索条件的数据可能会在不同时间出现。 每当api调用返回时，记录可能会更改。 因此，在任何时间点，都无法保证结果是否正确无误，这取决于用户在任何特定时刻选择的过滤条件。

如何确保结果始终与过滤条件保持同步？

我无法同步加载结果，因为有时api调用可能会非常慢，并且用户将不得不等待数小时才能看到结果。
由于数据库中的记录数量和其他一些业务限制，我无法一次加载所有记录并无法在UI上过滤结果。
我无法从后端提高性能，因为它仍然无法解决当前的问题。

请帮忙。

Answer 1

一个承诺就是一个承诺。 因此，它将始终被解决（resolve / reject），并且在解决时将始终调用then（）。

为了确保我的最新调用已执行，我们可以维护函数调用计数器。 仅当最近一次调用时，记录才会更改。

这是一个工作示例：

 var app = angular.module('TestApp', []); app.controller('Ctrl', ['$scope', '$q', function($scope, $q) { var vm = this; vm.result = 0; vm.loadCount = 0; vm.countToBeDisplayed = 0; vm.getResult = function(localLoadCount) { var deferred = $q.defer(); setTimeout(function() { console.info("localLoadCount: " + localLoadCount); console.info("vm.loadCount: " + vm.loadCount); deferred.resolve(localLoadCount); }, Math.floor(Math.random() * Math.floor(10)) * 1000); return deferred.promise; }; vm.loadTestMultipleLoadsPromise = null; vm.invokeTestMultipleLoads = function() { vm.loadCount++; var localLoadCount = vm.loadCount; vm.loadTestMultipleLoadsPromise = vm.getResult(localLoadCount); vm.loadTestMultipleLoadsPromise.then(function successCallback(response) { // Checking if loadCount matches the localLoadCount if (vm.loadCount === localLoadCount) { vm.result = response; } }); }; }]);

 <!doctype html> <html ng-app="TestApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> </head> <body> <div ng-controller="Ctrl as vm"> Result: {{vm.result}} <button ng-click="vm.invokeTestMultipleLoads()">call test method</button> </div> </body> </html>

vm.getResult（）：方法就像您的api调用一样。 它具有随机超时，因此我们可以预期它的行为与慢速api相同。

vm.invokeTestMultipleLoads（）：从javascript / angualr调用此函数。 它会在内部调用api。 每当调用此方法时，都会增加loadCount。 请注意，仅当localCount与loadCount匹配时，我们才更改结果。

在AngularJS中处理多个异步调用和范围更新的最佳方法

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-02-08 07:36:14

在AngularJS中处理多个异步调用和范围更新的最佳方法

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-02-08 07:36:14

解决方案1
1 已采纳 2018-02-08 07:36:14