javascript - 在服务中等待 Angular JS (REST -> $resource)

Question

互联网上有很多关于这个话题的话题。但我仍然被困住了。 由于所有信息，我再也看不到森林里的三人组了(荷兰语)

希望通过这种方式得到一些帮助。如果这是重复的，我真的很抱歉! 我主要是一名 C# 开发人员，但想学习一些 Web 框架。我开始@AngularJS。这是我的第一个更大的项目。所以对于 AngularJS 我还是个新手

我正在制作一种 DAL(是的，C#)。我为此使用了一项服务。我的目的当然是封装 Controller 的其余调用!

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

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

所以这是我获取所有用户的函数。我使用了“缓存”，我没有重新加载所有用户。在我的应用程序中不需要它。结果，它变得更加平滑! (减少等待)

现在我的问题是我想加载所有答案。我借助用户 ID 将用户名添加到我的答案中。我想使用我的本地列表(缓存的列表)...

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 未定义，我的答案将没有用户名...

我尝试了很多。这是我的最终解决方案(不起作用)。我创建了一个单独的函数来返回查询的 promise

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 带有 Await 和 Async 关键字...

如果您有解决此问题或使其变得更好的提示。你真的会帮助我!

如果我的“架构”有问题也请告诉我，就像我第一次在 AngularJS 中所说的那样。我想学习:)

此致，ErazerBrecht

Answer 1

使用原始的$promise和其中的chain。

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;
};

在您的客户端代码中，链接来自第二个 promise 。

var refinedAnswers = getAnswers();

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

有关链接的更多信息，请参阅 AngularJS $q Service API Reference -- chaining .