时间戳

首页 > 解决方案 > 如何从 Vuejs 中的 HTML 访问 promise 结果

javascript - 如何从 Vuejs 中的 HTML 访问 promise 结果

问题描述

我正在用 Vuejs 为一个大学项目做一个网站。
该功能的范围是找出一本书是否被设置为收藏，然后返回图标的名称，以便自动设置正确的图标。
为此，我创建了函数setIcon()：

setIcon: async function (id) {
    var favs = await DataService.getFav();
    var isFav = favs.find((book) => book.id === id);
    if (isFav === undefined) {
       return "favorite_border";
    } 
    else
    {
       return "favorite";
    }
}

然后，该函数只需在图标标记内的 HTML 部分中调用。
出于调试的原因，我去掉了图标标签，只保留了一个按钮，所以我可以看到函数的返回值是什么，作为按钮的名称。

 <md-button class="md-button" @click.stop="setFav(book.id)">
       {{ setIcon(book.id) }}
 </md-button>

问题是函数返回的值是 aPromise Object而不是字符串"favorite_border"or "favorite"。

所以我的问题是如何在 HTML 部分访问承诺的结果？

我也试着把.then()零件放在后面，setIcon()但结果是一样的

标签： javascripthtmlvue.jspromise

解决方案

你不必使用async，试试这个：

setIcon: function(id) {
    DataService.getFav().then((favs) = >{
        var isFav = favs.find((book) = >book.id === id);
        if (isFav === undefined) {
            return "favorite_border";
        } else {
            return "favorite";
        }
    })
}

如果DataService.getFav()方法没有参数并且得到相同的结果，则应该将结果缓存在另一个方法中，否则每次执行setIcon都会调用DataService.getFav()，这是对性能的浪费。

推荐阅读