AngularJS承诺在加载数据之前已解决

一尘不染

AngularJS承诺在加载数据之前已解决

angularjs

在我的应用程序中，我必须获取一些JSON数据并将其分配给数组，然后再加载页面。这是我使用CardService服务获取JSON的代码：

cards = [];

var cs = {
...
fetchCards: function() {
      var d = $q.defer();
      $http.get("data/cards.php").success(function(data) {
                      cards = data;
                      d.resolve();
                }).error(function(data, status) {
                      d.reject(status);        
                 });
               return d.promise;
      },
getCards: function() { return cards; };
...
}

在控制器的resolve块中，我具有以下内容：

WalletController.resolve = {
        getCards: function(CardService) {
                CardService.fetchCards().then(loadView, showError);
        }
}

在实际的控制器中，我有以下内容：

function WalletController($scope, CardService) {
    $scope.cards = CardService.getCards();
}

问题是，服务中的fetchCards函数似乎在将JSON数据分配给cards变量之前就解决了诺言。这导致我的视图中加载了空白数据，直到刷新两次并很幸运为止。

我可以确认延迟加载，因为当我在控制台中记录cards变量时，在第122行（当加载视图时）得到一个空数组，在第57行（当JSON调用成功时）得到一个完整的数组。视图加载
后以某种方式执行第57行的代码。

我该如何解决？

阅读 224

2020-07-04

共1个答案

一尘不染

我没有用过，resolve但是我把它扔在那里，以防万一您遇到的问题与绑定到从服务返回的数组有关。

如果cards要从服务返回数组并将其绑定到UI中，则可能需要尝试填充相同的数组而不是进行设置cards = data;（这将使用未绑定到UI的新数组覆盖本地卡）。

就像是：

fetchCards: function() {
      var d = $q.defer();
      $http.get("data/cards.php").success(function(data) {
                      cards.length = 0;
                      for(var i = 0; i < data.length; i++){
                          cards.push(data[i]);
                      }
                      d.resolve();
                }).error(function(data, status) {
                      d.reject(status);        
                 });
               return d.promise;
      },

请参阅此提琴，以获取我要描述的工作示例。多次单击第一个按钮将更新视图，但是一旦单击第二个按钮，绑定将被破坏。

两者之间的主要区别是：

第一个按钮使用data.length = 0和data.push()保留原始数组的引用
第二个按钮使用覆盖data一个新的原始数组引用data = newArray

更新： 另外，就像下面提到的Mark
Rajcok一样，您可以使用angular.copy清空原始数组的引用，并从源代码中添加新的数组，从而保留原始数组的引用：

fetchCards: function() {
      var d = $q.defer();
      $http.get("data/cards.php").success(function(data) {
                      angular.copy(data, cards);
                      d.resolve();
                }).error(function(data, status) {
                      d.reject(status);        
                 });
               return d.promise;
      },

2020-07-04