javaScript中的异步数据检索

Asynchronous data retrieving in javaScript

本文关键字：数据 检索 异步 javaScript      更新时间：2023-09-26

我在那里，

我正在用Restangular和angular-local-storage的帮助下构建一个Angular.js应用。我需要从RESTFull服务服务器检索一些数据，并将其分配给$scope变量。

我想知道我怎么能等待所有的数据加载之前加载到我的视图(html)。

到目前为止我所做的是:

app.controller('InventoryController', function($scope, inventoryService) {                        
  $scope.productList = inventoryService.getProduces();
  console.log($scope.productList); // At that point, $scope.productList is null
});
app.service('inventoryService', function(entityService, browserStorageService) {
  entityService.allUrl('product', entityService.getBaseUrl).getList().then(function(data){
    console.log(data); // The data variable is not null here.
    browserStorageService.set('producList', data);
  });
  this.getProduces = function() {
    return browserStorageService.get('producList');
  };
});
app.service('browserStorageService', function(localStorageService) {
  localStorageService.clearAll();
  return localStorageService;
});
app.service('entityService', function(Restangular) {
  Restangular.setBaseUrl('http://localhost:8000/rest/');
  return Restangular;
});

我对JavaScript的异步特性一点也不满意，我相信它很简单，但我不知道该怎么做才能纠正这种情况。

在第一次调用控制器时，数据没有加载到页面中，但是当我再次调用它而不重新加载应用程序时，数据就在那里。

谢谢你的帮助!

不能在控制器中调用inventoryService.getProduces();，你必须在应用程序的配置部分使用来自service的数据创建resolve对象。之后，您可以访问传递给控制器的数据。

app.config(function($routeProvider){
    $routeProvider
    .when('/',{
        template:'',
        controller: 'InventoryController',
        resolve:{
            products: function(inventoryService) {
               return inventoryService.getProduces();
            }
        }
    });
});
app.controller('InventoryController', function($scope, products) {                        
    $scope.productList = products;
    console.log($scope.productList);
});

模板和路由路径应该根据你的应用结构来设置。

相关文章：