javascript - 从单个服务调用返回多个“独立”异步结果的正确 Angular 模式是什么

Question

我正在研究搜索用户界面。有一个结果 ListView ，每个结果都可以“扩展”以显示更多数据。当用户展开结果时，我异步获取可以包含 0 到 12 张图片的详细信息。这是通过“细节服务”来完成的，这是 Angular 意义上的服务。

现在，因为我的目标是“类似原生的感觉”，并且这些图像可能很重，所以我不希望它们在加载完成之前出现。

问题是:当每个图像加载时，服务如何通知其客户端( Controller )？

许多文章建议将 Promise 视为实现此目的的最佳方式。天真地，我会认为返回一组 promise - 每个图像一个 - 将在图像加载后解决。

这似乎是一个严厉的解决方案，需要一个循环将 then() 函数附加到任意数量的 Promise。

另一个流行的解决方案是在 $rootScope 上使用broadcast()。这看起来很“草率”，因为我确切知道谁在“聆听”结果。

“ promise 数组”是否正确，或者是否有更简洁或“Angular ”的方式？

注意:这些是独立的结果，不应链接或组成单个 promise 。

编辑:对不清楚的问题表示歉意。所需的功能是每张图片在加载时都显示出来。因此，汇总 promise 是不可取的。这就留下了核心问题: promise 是否是最简洁的解决方案。我发现了我认为更好的一个，在答案中表示为图像指令，该指令延迟显示直到加载图像。将此逻辑从服务中移出并放入指令中似乎是一个更优雅的解决方案。

Answer 1

我想说“一系列 promise ”是正确的方法。

您可以使用 .all() 方法，该方法将任意数量的 Promise 作为参数(作为数组)。然后，您可以将此 Promise 解析为单个 Promise。

Returns a single promise that will be resolved with an array/hash of values, each value corresponding to the promise at the same index/key in the promises array/hash. If any of the promises is resolved with a rejection, this resulting promise will be rejected with the same rejection value.

    $q.all([firstPromise.then(function(){
                             //do something
                             }),
            secondPromise.then(function(){
                             //do something else
                               })
           ])
     .then(function(){
            //do something after all promises are resolved
            });

https://docs.angularjs.org/api/ng/service/ $q