从多个网络 api 方法中获取 JSON 数据（$q.all）

Question

我有一个带有表单的简单应用程序。加载表单时，我想调用几个 Web api 方法来获取用于初始化表单的 json 数据。在我的工厂 class 中，表单可以很好地处理硬编码数据。我不确定如何在该文件中发出多个请求并且有点卡住了。

表格：

<div class="modal-header" style="text-align:center">
<h3 class="modal-title">Configure</h3>
<div style="margin-top:10px">
    <button tabindex="100" class="btn btn-success pull-left" type="submit">Submit</button>
    <button class="btn btn-warning pull-right" ng-click="close($event)">Close</button>
    </div>
</div>
<div class="modal-body">
<div class="col-sm-6" style="width: 100%;">
    <form name="joinForm">
        <div class="form-horizontal">
            <div class="form-group">
                <label class="control-label col-sm-3">Symbol</label>
                <div class="col-sm-9">
                    <select ng-model="simulationsettings.symbols" ng-  options="key as value for (key,value) in symbols"></select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-3">Interval</label>
                <div class="col-sm-9">
                    <select ng-model="simulationsettings.intervals" ng-options="key as value for (key,value) in intervals"></select>
                </div>
            </div>
        </div>
    </form>
</div>

控制器：

mainApp2.controller("moduleConfigformController",
function moduleConfigformController($scope, moduleConfigformService,$uibModalInstance) {
$scope.close = function(e) {
  $uibModalInstance.dismiss();
  e.stopPropagation();
};
$scope.simulationsettings = moduleConfigformService.simulationsettings;
$scope.symbols = $scope.simulationsettings.symbols;
$scope.intervals = $scope.simulationsettings.intervals;
});

保存表单（硬编码）数据的工厂class：

mainApp2.factory("moduleConfigformService",
function () {
    return {
        simulationsettings: {
            symbols: {
                'symbol1': "symbol1",
                'symbol2': "symbol2"
            },
            intervals: {
                '60': "1 minute",
                '120': "2 minutes",
                '180': "3 minutes"
            }
        }
    }
});

我想调用服务器而不是硬编码值，但在经过几个小时的研究、跟踪和错误之后非常卡住：

mainApp2.factory("moduleConfigformService",
function () {

    function getSymbols() {
        return $http.get("/api/getsymbols");
    }

    function getIntervals() {
        return $http.get("/api/getIntervals");
    }
    return {
        simulationsettings: {
            symbols : getSymbols()
            },
            intervals : getIntervals()
    }
});

你能给我指出正确的方向吗？

Answer 1

如果我看一下你的控制器，我没有看到你在等待 http 请求 return 一个答案。

你应该看看angularjs promises 简而言之，您必须使用

之类的东西

moduleConfigformService.simulationsettings.then(function (response) {
//doSomeThingWithResponse
})

Answer 2

$http 服务没有 return 值。它return承诺。参见 AngularJS $http Service API Reference - General Usage。此外，使用来自工厂的基于 promise 的 API 可能有点棘手。我建议在控制器中编写和调试代码，然后重构以使用工厂。

app.factory("moduleConfigformService",
function ($q,$http) {

    function getSymbols() {
        return $http.get("/api/getsymbols")
          .then(function (response) { 
            return response.data;
        });
    }

    function getIntervals() {
        return $http.get("/api/getIntervals")
          .then(function (response) {
            return response.data
        });
    }

    return {
        getSymbols: getSymbols,
        getIntervals: getIntervals,
        simulationsettings: function () {
            var promiseHash = {};
            promiseHash.symbols = getSymbols();
            promiseHash.intervals = getIntervals();
            return $q.all(promiseHash);
        }
    }
});

用法

var settingsPromise = moduleConfigformService.simulationsettings();

settingsPromise.then(function(settings) {
   $scope.simulationsettings = settings;
}).catch(function(error) {
   throw error;
});

从多个网络 api 方法中获取 JSON 数据（$q.all）

Fetching JSON data from multiple web api methods ($q.all)

asp.net-web-api

angularjs

angularjs-http

angular-promise

用法