在服務中等待Angular JS（REST - > $ resource）

Question

互聯網上有很多關於這個主題的話題。但我仍然陷入困境。 由於所有的信息，我不能再看到在森林裏的三分之一（荷蘭語說）

希望得到一些這樣的幫助。如果這是重複的，我真的很抱歉！ 我主要是C＃開發人員，但想學習一些Web框架。我開始了@ AngularJS。這是我第一個更大的項目。所以我仍然是一個新手，當談到AngularJS

我正在做一種DAL（是的C＃）。我爲此使用了一項服務。我的目的是爲我的控制器封裝其他呼叫！

angular.module("adminApp").service("adminRestDAL", function ($resource, $q) { 
var userData; 

this.getUsers = function() { 
    if (!userData) 
     userData = $resource("/admin/users").query(); 
    return userData; 
}; 

所以這裏是我的功能，讓我所有的用戶。我使用'緩存'，我沒有重新加載所有用戶。在我的應用程序中不需要。因此它更平滑！ （少於等待）

現在我的問題是我想加載我所有的答案。我在用戶名的幫助下將用戶名添加到我的答案中。我想使用我的本地列表（緩存一個）...

this.getAnswers = function() { 
    //Always update answers! 
    //No need for manuel caching (no global variable) 

    //Make sure we have our users loaded! 
    //This is exactly why I <3 C# 
    //I could reuse my existing function (getUsers) and just put 'await' before it... 
    this.getUsers(); 

    var answersData = $resource("/admin/answers").query(function (data) { 
     data.forEach(function (answer) { 
      answer.name = userData.find(function (u) { 
       return u._id === answer.userid; 
      }).name; 
     }); 
    }); 
    return answersData; 
}; 

查看評論。我必須等到用戶加載才能繼續。在80％的情況下，這個功能起作用。用戶在答案之前完成，然後沒有問題。但當它不是，userData是未定義的，我的答案將沒有用戶名...

我試了很多。這是我的最終解決方案（不起作用）。我做了一個單獨的函數，返回查詢的承諾

function getUsersAsync() { 
    if (!userData) 
     return $resource("/admin/users").query().$promise 
      .then(
       function (success) { 
        userData = success; 
       }) 

}; 

this.getAnswers = function() { 
    //Always update answers! 
    //No need for manuel caching (no global variable) 

    //Make sure we have our users loaded! 
    //This is exactly why I <3 C# 
    //I could reuse my existing function (getUsers) and just put 'await' before it... 
    //this.getUsers(); 

    getUsersAsync().then(
     function() 
     { 
      var answersData = $resource("/admin/answers").query(function (data) { 
       data.forEach(function (answer) { 
        answer.name = userData.find(function (u) { 
         return u._id === answer.userid; 
        }).name; 
       }); 
      }); 
      return answersData; 
     } 
    ) 
}; 

這裏'代碼'等待，直到我的用戶加載。但我無法返回我的數據（答案）了！返回現在是另一個功能比我的getAnswers（）函數...

所以我不知道如何解決這個問題在AngularJS。我搜查了很多，發現了一些有用的博客。但仍然卡住。我還發現，ES7是隨着等待和異步關鍵字...

如果你有提示，以解決這個問題，或使其更好。你真的會幫助我！

如果我的'架構'出了問題，請告訴我，就像我第一次在AngularJS上說的那樣。我想學:)

真誠，ErazerBrecht

Answer 1

使用原來的$promise和鏈從。

this.getAnswers = function() { 

    var answersData = $resource("/admin/answers").query(); 

    //save promise for chaining 
    var secondPromise = answersData.$promise.then(function (data) { 
     data.forEach(function (answer) { 
      answer.name = userData.find(function (u) { 
       return u._id === answer.userid; 
      }).name; 
     }); 
    }); 
    //return secondPromise for chaining  
    answersData.$promise2 = secondPromise; 
    return answersData; 
}; 

在你的客戶端代碼，鏈從第二承諾。

var refinedAnswers = getAnswers(); 

refinedAnswers.$promise2.then (function onFulfilled() { 
    console.log(refinedAnswers); 
}; 

欲瞭解更多有關鏈接看AngularJS $q Service API Reference -- chaining。

Answer 2

您不應該試圖將您的用戶和答案數據結合在服務中。該服務僅僅是獲取數據的封裝 - 它是控制器應該組合數據，以便以有效的格式提供給您的視圖。

考慮到這一點，你的服務應該是裸露的骨頭簡單：

this.getUsers = function(){ 
    return $resource("/admin/users").query(); 
}; 

this.getAnswers = function(){ 
    return $resource("/admin/answers").query(); 
}; 

然後，在你的控制器，在這裏你要拼湊的高速緩存邏輯。

$scope.users = null; 

$scope.getUsers = function(){ 
    if($scope.users === null){ 
     myService.getUsers().$promise.then(function(data){ 
      $scope.users = data; 
     }); 
    } 
}); 

$scope.getAnswers = function(){ 
    myService.getAnswers().$promise.then(function(data){ 
     $scope.answers = data; 
     for(var i = 0; i < $scope.answers.length; i++){ 
      $scope.answers[i].name = $scope.users.find(function(u){ 
        return u._id === $scope.answers[i].userid; 
      }).name; 
     } 
    }); 
}); 

Answer 3

總是當我發佈到Stackoverflow的東西我幾分鐘後自己找到答案。我應該暫停一下。

我忘了試着在我的getAnwsers資源的回調中執行我的getUser功能。這確實解決了我的問題。

不過感謝兩位回答的傢伙！你是爲什麼stackoverflow是一個很好的地方爲新的誰正在學習的東西:)

//Private function 
//Had to do this because if need to access this function inside a callback 
//this doesn't point to this service anymore but to the callback... 
function getUsersAsync() { 
    if (!userData) 
     userData = $resource("/admin/users").query(); 
    return userData; 
}; 

this.getUsers = function() { 
    return getUsersAsync(); 
}; 

this.getAnswers = function() { 
    //Always update answers! 
    //No need for manuel caching (no global variable) 

    var answersData = $resource("/admin/answers").query(function (data) { 
     //Make sure we have our users loaded! 
     getUsersAsync().$promise 
      .then(
       function() { 
        data.forEach(function (answer) { 
         answer.name = userData.find(function (u) { 
          return u._id === answer.userid; 
         }).name; 
        }); 
       } 
      ) 
    }); 
    return answersData; 
};