javascript - AngularJs - 同时进行多个服务调用？

Question

我有一个非常大的搜索表单，其中包含 8 个必须从 Web 服务填充的选择控件以及其他字段。我正在为如何使用 AngularJs 最好地完成此任务而苦苦挣扎。我是否要调用一个，并将下一个放在“then”子句中，然后将 ext 放在“then”子句中，依此类推？仅仅看到这一点就让我觉得一定有一种更好的、格式良好的方法来做到这一点，而我只是缺少这种方法，因为我是 Angular 的新手......

为了说明这个问题，我有以下 HTML(整个表单的一部分):

<div class="row">
    <div class="col-md-12">
        <div class="col-md-2">
            <label for="ddlRace">Race</label>
            <select id="ddlRace" class="form-control"></select>
        </div>
        <div class="col-md-2">
            <label for="ddlHairColor">Hair Color</label>
            <select id="ddlHairColor" class="form-control">
            </select>
        </div>
        <div class="col-md-2">
            <label for="ddlEyeColor">Eye Color</label>
            <select id="ddlEyeColor" class="form-control">
            </select>
        </div>
        <div class="col-md-2">
            <input type="text" id="tbHeight" class="form-control">
        </div>
        <div class="col-md-2">
            <input type="text" id="tbWeight" class="form-control">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-3">
        <label for="tbStreetNumber">House Number</label>
        <input type="text" id="tbStreetNumber" class="form-control">
    </div>
    <div class="col-md-2">
        <label for="ddlStreetPrefix">Prefix</label>
        <select id="ddlStreetPrefix" class="form-control">
            <option value="">Prefix</option>
        </select>
    </div>
    <div class="col-md-5">
        <label for="tbStreetName">Street Name</label>
        <input type="text" id="tbStreetName" class="form-control">
    </div>
    <div class="col-md-2">
        <label for="ddlStreetSuffix">Suffix</label>
        <select id="ddlStreetSuffix" class="form-control">
            <option value="">Suffix</option>
        </select>
    </div>
</div>

我必须通过服务调用填充种族、头发颜色、眼睛颜色、街道前缀和街道后缀。我有一个工厂设置，其中包含每个调用，但我需要在表单最初加载时运行所有这些，以便我可以填充字段。那么使用 deferred/promise API 执行此操作的最佳方法是什么？

Answer 1

逐个调用每个 Promise，而不用“then”子句将它们链接在一起。否则，如果你这样做，它们将串行运行 - 这不是你想要的。

当所有 promise 都得到解决或出现问题时，使用 $q.all 注册成功/错误回调:

var p1 = promise1();
var p2 = promise2();
var p3 = promise3();

$q.all([p1, p2, p3])
       .then(
             function() { /*success*/ },
             function() { /*error */ }
        );