Question

我在以某种方式等待gor我的funcuteDamage时遇到问题，在绘制视图之前返回结果，使我留有空列表，但是函数通过并“最终”获取了数据。。不用说为时已晚..

所以我想知道是否有任何方法可以强制视图等待（油门），稍后更新或我可能拥有的其他任何选择。

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>

我已经“搜索了整个网络”，但我似乎无法弄清楚如何获得结果。.还请注意，如果我要返回return“ blabla”视图，则会获得该信息。因此，据我所知，除了我的组件不等待funcateDateage结束之前，其他一切都还不错。有任何想法或提示吗？

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

Answer 1

是吉特人：D

因此，您在这里拥有的是一个defineDamage函数，该函数不返回值而是一个Promise。

这个承诺有一些可以链接的方法

then

catch

finally

这意味着当您调用defineDamage（）时，您将使用这些方法创建一个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函数的函数将在将来的某个时候被调用，并将作为参数传递给您的响应。

这意味着您的单线程浏览器可以连续调用其中的一百个，然后继续进行解释而不会阻塞该线程，并且有时会成功或错误地回调您的响应。

AngularJS组件和等待同步功能

1 个答案: