Question

我在组件中找到了异步计算方法的解决方案：

目前，我的组件是：

<div class="msg_content">
   {{messages}}
</div>

<script>
export default {
  computed: {
    messages: {
      get () {
        return api.get(`/users/${this.value.username}/message/`, {'headers': { 'Authorization': 'JWT ...' }})
        .then(response => response.data)
      }
    }
  },
}
</script>

结果： {}

如何在Promise模式下重写它？因为我认为我们可以通过写入Promise模式来异步计算。

Answer 1

计算属性基本上是缓存其结果的函数，因此无需在每次需要时计算它们。他们根据他们使用的无效值自动更新。

您的计算机不使用任何被动项目，因此计算它没有意义。它现在返回一个Promise（假设then的通常行为。）

目前还不完全清楚您想要实现的目标，但我最好的猜测是您应该创建一个数据项来保留response.data，并在created hook中进行api.get来电。像
这样的东西
export default { data() { return { //... messages: [] }; }, created() { api.get(`/users/${this.value.username}/message/`, { 'headers': { 'Authorization': 'JWT ...' } }) .then(response => this.messages = response.data); } }

Answer 2

通过将async和await与axios＆＃39;结合使用，es7使这一点变得非常简单。回报了承诺。您需要vue-async-computed包。

export default {
   asyncComputed: {
       async myResolvedValue() {
          return await api.get(`/users/${this.value.username}/message/`, {'headers': { 'Authorization': 'JWT ...' }})
              .then(response => response.data)
       }
    }
}

组件中的异步计算 - VueJS？

2 个答案: