Vue.js中如何在HTML模板内获取异步Promise函数的返回结果

所有async函数的返回值默认都是Promise实例，Vue模板的渲染逻辑是同步执行的，不会自动等待异步任务执行完成再取值，所以会直接渲染Promise对象本身。你尝试在后面加.then()也没用，因为.then()的返回值仍然是Promise实例。

不要在模板中调用异步函数，提前拉取收藏列表存入响应式数据，用同步方法判断返回图标：

1. 先在data中声明存储收藏列表的响应式变量，页面初始化时拉取收藏列表

data() {
  return {
    favs: []
  }
},
async created() {
  // 页面加载时提前拉取全量收藏列表
  this.favs = await DataService.getFav()
},
methods: {
  // 同步判断返回对应图标
  getIcon(id) {
    return this.favs.find(book => book.id === id) ? 'favorite' : 'favorite_border'
  },
  // 点击切换收藏状态后更新收藏列表，保证图标实时刷新
  async setFav(id) {
    // 原有调用收藏接口的逻辑不变
    await DataService.toggleFav(id)
    // 操作完成后更新本地收藏列表，可选重新拉取全量，或者直接修改本地数组提升性能
    this.favs = await DataService.getFav()
  }
}

2. 模板中直接调用同步的getIcon方法即可

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

如果你的书籍列表是分页加载、全量拉取收藏列表成本过高，可以在获取到书籍列表后，遍历列表给每本书籍对象新增icon属性，异步赋值后再渲染，模板中直接读取book.icon即可。

禁止在模板中直接调用异步函数，除了无法拿到返回值的问题外，每次页面重渲染都会重新触发函数调用，会产生大量重复的无效请求，严重影响性能。

内容的提问来源于stack exchange，提问作者Davide Marana