在定期更新的 Angular 中存储和使用数据的最佳方式

Best way to store and use data in Angular that updates periodically

本文关键字：数据 最佳 方式 存储 定期更新 Angular      更新时间：2023-09-26

我是 Angular 的新手，我正在尝试创建一个应用程序，该应用程序每 5 分钟从动态生成的 JSON 文件中提取数据并使用新数据更新视图。 JSON 文件包含网站的所有数据，即滑块和事件列表的数据。 我读到全局数据可以存储在$rootScope中，也可以使用 .service 或 .factory 进行检索和服务。 我尝试了不同的方法，但没有成功，我迷路了。 定期从整个应用的 API 中提取数据、存储和使用数据的最佳方法是什么？

目前我有这个代码：

app.factory("Poller", function Poller($http, $timeout){
    var data = {'slider' : [], 'activities' : []};
    var getData = function(){
        $http.get('http://example.com/json.php')
            .then(function(r){
                data = r.data;
            });
        $timeout(getData, 1000*60*5);
    }
    getData();
    return{
        data: data
    }
});
app.controller('ListController', function(Poller){
    this.activities = Poller.data.activities;
});

我想你正在寻找这样的东西：

见普罗提

app.factory("Poller", function Poller($http, $interval){
    var data = {
        'newData': {
            'one' : '',
            'key' : ''
        },
        'fetchCount': 0
    };
    var getData = function() {
        data.fetchCount += 1;
        $http.get('http://echo.jsontest.com/key/value/one/two')
            .then(function(response){
                data.newData = response.data;
            });
    };
    var loopGetData = function() {
        $interval(getData, 5000);
    };
    loopGetData();
    return{
        data: data,
    };
});
app.controller('ListController', function($scope, Poller){
    $scope.activities = {'one' : '', 'key' : ''};
    $scope.Initialize = function () {
        $scope.$watch(function () { return Poller.data.newData; },
        function(newValue, oldValue) {
            if (newValue !== oldValue) {
                $scope.activities = newValue;
            }
        });
    };
    $scope.Initialize();
});
app.controller('CountController', function($scope, Poller){
    $scope.fetchCount = 0;
    $scope.Initialize = function () {
        $scope.$watch(function () { return Poller.data.fetchCount; },
        function(newValue, oldValue) {
            if (newValue !== oldValue) {
                $scope.fetchCount = newValue;
            }
        });
    };
    $scope.Initialize();
});

所以这里的问题看起来你已经定义了getData() Poller工厂内发出 ajax 请求的函数，但没有将其绑定到工厂返回对象中的键。

尝试添加这个，

return{
    data: data,
    getData: getData
}

然后删除返回块之前的getData()。

现在我觉得根据应用程序的设置，如果您想实现长轮询效果，您应该将getData()附加到某个始终存在的顶级控制器中的变量，以便您可以使用 $timeout 定期调用getData()。

说到$timeout，你应该在getData()之外提取$timeout，以便函数本身只是发出ajax请求。以这种方式进行更模块化的单一责任设计，如果需要，可以使该工厂功能在应用的其他区域中更有用。

如果你想在每五分钟完成一次ajax请求后更新信息，你应该查看$broadcast和$rootScope，你基本上可以告诉你的整个Angular应用程序一些rootScope变量或服务已经改变，它们会相应地更新。您需要在调用 getData() 函数的任何控制器内的 ajax 请求之后设置某种回调。

相关文章：