javascript - 多个 AngularJS 获取请求到一个模型中

Question

有没有办法通过 AngularJS 中的 get() 函数调用未知数量的 API 调用并将它们全部添加到模型中($scope多变的)。到目前为止，我所做的如下:

if(theUIDS != "") {
    var myDropbox = [];

    for(i = 0; i < theUIDS.length; i++) {
        var temp = {};

        temp.uid = theUIDS[i];

        $http({ url: '/dropbox/accounts/get', method: 'GET', params: { uid: theUIDS[i] }}).success(function(acctData) {
            temp.accountInfo = acctData;
        });

        $http({ url: '/dropbox/files/get', method: 'GET', params: { uid: theUIDS[i] }}).success(function(fileData) {
            temp.files = fileData;
        });

        myDropbox.push(temp);
    }

    $scope.dropboxAccounts = myDropbox;
}

我检查是否有任何 UID，并为每个 UID 创建一个 temp 对象，其中填充了一个 uid，然后是一个 accountInfo对象，然后是 files 对象。设置完 temp 对象后，我将其推送到 myDropbox 数组中。循环完成后，我将 dropboxAccounts 模型设置为 $scope 中的 myDropbox 变量。我是 Angular 的新手，但我很确定这至少是正确的想法。幸运的是，我以正确的顺序获取了以下数据:

{"uid":"332879"}
{"uid":"155478421",
    "accountInfo":{
        "country":"US",
        "display_name":"Patrick Cason",
        "name":"Second Dropbox",
        "quota_normal":1174504,
        "quota_shared":0,
        "quota_total":2147483648,
        "referral_link":"https://www.dropbox.com/referrals/NTE1NTQ3ODQyMTk?src=app9-203957",
        "uid":155478421},
    "files":[{
        "created_at":"2013-04-17T15:13:46Z",
        "directory":true,
        "dropbox_user_id":26,
        "fileType":"Folder",
        "id":198,
        "name":"Photos",
        "path":"/Photos",
        "rev":"10edb44f9",
        "size":"-",
        "updated_at":"2013-04-17T15:13:46Z"}]
}

奇怪的是，只有我的一个 UID 得到更新。我知道循环正确进行，因为我有两个 UID，如果我在循环开始时发出警告，我会得到两个循环。我认为第二个没有被填充的原因是因为推送语句没有等待两个 promise 都通过。如何确保在将 myDropbox 分配给 $scope 变量之前等待每个 AJAX 调用完成？

Answer 1

介绍

我是 AngularJS 的新手，所以这个解决方案非常正在进行中。我想，既然我一直在努力学习更多关于它的知识，那么其他人也可能处于相同的位置。话虽如此，我不仅要发布我的答案，还要解释我在代码背后的想法。如果有人觉得答案可以改进，我很乐意得到任何反馈。

最终代码

这是我用来使一切正常工作的代码:

var app = angular.module('myApp', []);

app.controller('DropboxCtrl', function($scope, dropbox) {
    $scope.dropboxAccounts = dropbox.getAccounts();
    $scope.dropboxFiles = dropbox.getFiles();
});

app.factory('dropbox', function($http, $q) {
    var theUIDS = [12345,67890];

    return {
        getAccounts: function() {
            var promises = [];

            for(i = 0; i < theUIDS.length; i++) {
                promises.push($http({
                    url: '/dropbox/accounts/get', 
                    method: "GET",
                    params: { uid: theUIDS[i] }
                }));
            }

            return $q.all(promises);
        },
        getFiles: function() {
            var promises = [];

            for(i = 0; i < theUIDS.length; i++) {
                promises.push($http({
                    url: '/dropbox/files/get', 
                    method: "GET",
                    params: { uid: theUIDS[i] }
                }));
            }

            return $q.all(promises);
        }
    }
});

基本算法

我们首先声明一个模块 myApp 并将其保存在变量 app 中...注意我们传递的空数组，它通常是任何参数可能会或可能不会从其他模块继承的进一步要求。

在我们的模块声明之后，我们需要创建一个相应的 Controller ，它将成为所有交互发生的网关。在这种情况下，我们需要访问相对于我们的 Controller (而不是相对于应用程序本身)的 $scope 变量。我们还声明了这个 Controller 与哪个工厂相关，在我的例子中是 dropbox(我们稍后会谈到工厂)。在此 Controller 内部，我们将两个模型分配给 $scope:dropboxAccounts 和 dropboxFiles。请注意，我最初的愿望是在我的 AngularJS 应用程序中拥有一个模型。虽然这是可能的......我选择反对它，因为我发现很难区分我的两种类型的 JSON 返回。一个返回帐户元数据，另一个返回该帐户的一组文件。我希望将所有这些都放在一个模型下并按 uid 参数排序，但发现如果不更改我的 RESTful 端点输出的 JSON 是不可能做到的。最后，我选择了两个独立的模型，这样我可以更轻松地使用它们(直到我找到一种方法根据一个通用参数将它们组合起来)。

最后，我们创建了一个工厂来存储我的 AJAX 函数(使用 $http 进行实际的 AJAX 调用，使用 $q 来处理 promise )。我有两个函数:(记得是从我的 Controller 调用的)getAccounts 和 getFiles。他们每个人都有一个名为 promises 的数组，它将存储我的 $http 调用的 promise 。我在一个 for 循环中运行这些调用，它将查看我在 theUIDS 中的每个项目，它在我的 AJAX 调用中使用，然后被推送到 promises大批。最后我们有我们的 $q ，它会等到 promises 数组中的所有 AJAX 调用都成功完成，然后再将所有数据以一个大的 promise 返回给我们的 Controller 并将其分配给 $scope。

我学到了什么

AngularJS 真的很难。这个特殊问题花了我两天的时间调试和反复尝试。有人告诉我，虽然这个前端 MVC 框架的学习曲线非常陡峭，但返回是值得的。我想我们会看到...

资源

• AngularJS API
• Factories and Services comparison
• Good use of AngularJS's all method
• Beautiful explanation of AJAX promises both in jQuery and AngularJS