时间戳

首页 > 解决方案 > 使用 vue 创建的生命周期钩子获取数据，但似乎没有填充承诺的结果

vue.js - 使用 vue 创建的生命周期钩子获取数据，但似乎没有填充承诺的结果

问题描述

由于我对 vue 的了解有限，我面临的问题是，除非我在 vue js 模板中调用异步方法，否则即使我要在created生命周期挂钩中调用异步方法，我也无法访问承诺的结果。我的理解created是它被更早地调用，以便可以触发异步操作，例如从 api 获取数据。

正如您将在下面的代码中看到的那样，该函数loadAlerts()在created. 但是，除非我{{loadAlerts()}}在模板中调用，否则我将无法在alerts紧随li其后的中使用承诺的结果 , 。模板内调用的问题是{{loadAlerts}}模板上[object Promise]也显示了。如果我{{loadAlerts}}从模板中删除，则不会显示任何警报。

内部的调用不应该created已经填充了承诺的结果，例如：alerts？{{loadAlerts()}}正如您将在下面的代码中看到的那样，我在循环通过警报之前已将其注释掉。没有它，我看不到任何警报。

我需要做什么

  1. alerts仍将被填充而无需loadAlerts在模板内调用（即，在模板内调用它created或mounted改为调用它）

OR

  1. alerts仍将被填充但[object Promise]不显示

我猜，选项 1 可能更优雅和推荐的方式？

<template>
 <div v-if="alerts">
  <h4>{{ title }}</h4>
  <!-- {{loadAlerts()}} -->
  <li v-for="alert in alerts" class="alert">
     {{ alert.name }}
  </li>
 </div>
</template>

export default {
  data () {
    return {
      alerts: null
    }
  },

  computed: {
    ...mapGetters('authentication', ['token']),
    ...mapGetters('user', ['profile']),

    title () {
      // Handle the null case
      const alerts = this.alerts || []

      return `My Alerts (${alerts.length})`
    }
  },

  methods: {
    // This needs to be in the methods, not a computed property
    loadAlerts () {
      return getUserAlert({
        user_id: this.profile.user_id,
        token: this.token
      }).then(response => (this.alerts = response.data)).catch(
        error => console.log(error)
      )
    }
  },

  // Initiate loading in a hook, not via the template
  created () {
    this.loadAlerts()
  }
}
</script>

标签： vue.jspromise

解决方案

应该没有理由调用模板中的函数。可能发生的事情是user_id和/或在挂钩token期间尚不可用。created所以你不会看到任何结果。（通过提醒他们检查这一点——不要登录到控制台。）

当您将方法添加到模板时，如果稍后发生任何重新渲染，则将再次进行异步调用。在某些时候，可能会在可用时发生user_id，token 因此您会看到数据。

由于这个原因，这也不是一个好的模式：每次重新渲染模板时都会对 API 进行另一次调用，即使在它工作一次之后也是如此。

一种解决方案是应该有一个来自user_id/token初始加载的承诺，您可以将其传递给该组件。然后created钩子可以在then那个promise中注册它的动作。

推荐阅读