AngularJS 组件和等待同步功能答案

【问题标题】：AngularJS component and waiting for sync functionAngularJS 组件和等待同步功能
【发布时间】：2019-06-24 08:16:16
【问题描述】：

我遇到了“不知何故”等待或我的函数确定损坏在绘制视图之前返回结果的问题，给我留下了空列表，但是函数通过并“最终”获取数据..不用说为时已晚..

所以我想知道是否有任何方法可以强制查看 wait(throttle)、稍后更新，或者我可能拥有的任何其他选项。

angularApplication.component("damage", {
    bindings: {
        results: "=",
    },
    templateUrl: "views/damage-results.html",
    controller: function(Champion) {

        let $ctrl = this;

        const determineDamage = function (options) {
            //return "blabla"; --this would print "blabla" properly
            let champion = new Champion({options:options});
            return champion.fetch().then(() => {
                champion.findName().then((name) => {
                    console.log(name);
                    //name is logged but well, "too late"
                    return name;
            });
        };

        $ctrl.$onInit = function () {
            $ctrl.results = $ctrl.results || [];
            $ctrl.determineDamage = determineDamage;
        };

HTML：

    <li ng-repeat="champs in $ctrl.results">
        <div class="champion__list">{{$ctrl.determineDamage(champ.id)}}</div>
    </li>

我已经“搜索了整个网络”，但我似乎无法弄清楚如何获得我的结果.. 另请注意，如果我要返回“blabla”视图将获得该信息。因此，据我所知，一切都很好，只是我的组件不等待函数确定损坏完成。有什么想法或提示吗？

编辑：注意：我得到的不是空的，具体来说，我得到 [object Promise] 从我的 return Champion.fetch 行返回。

【问题讨论】：

标签： angularjs components

【解决方案1】：

这是来自 gitter 的人 :D

所以这里有一个函数 determineDamage，它不返回一个值，而是一个承诺。

这个 Promise 上有一些可以链接的方法

then

catch

finally

这意味着当你调用determineDamage() 时，你会得到一个带有这些方法的Promise 对象

var promise = determineDamage();

determineDamage
.then(function(response){
//Called on succcess
})
.catch(function(error){
//Called on error
})
.finally(function(){
//Always called at the end
})

在您的情况下，您想要做的是获得成功的响应，您甚至不必承诺自己的变量

determineDamage()
.then(function(response){
$ctrl.results = response;
});

传递给 then 函数的函数将在未来某个时间被调用，并将作为参数传递给您的响应。

这意味着您的单线程浏览器可以连续调用一百个这样的线程，然后继续解释而不会阻塞线程，并且在某些时候会发出包含您的响应的成功或错误回调。

【讨论】：