web-dev-qa-db-fra.com

Calculs asynchrones en composants - VueJS?

Je trouve une solution à la méthode calculée asynchrone dans les composants:

Actuellement, mes composants sont:

<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>

Résultat: {}

Comment le réécrire en mode Promise? Parce que je pense que nous pouvons calculer de manière asynchrone en écrivant en mode Promise.

vue.jsvuejs2vue-component
15
KitKit

Les propriétés calculées sont essentiellement des fonctions qui mettent en cache leurs résultats, de sorte qu'ils ne doivent pas être calculés chaque fois qu'ils sont nécessaires. Ils ont mis à jour automatiquement en fonction des valeurs réactives qu'ils utilisent .

Votre calcul n’utilise pas d’éléments réactifs, il n’ya donc aucun intérêt à ce qu’il soit calculé. Il retourne une promesse maintenant (en supposant le comportement habituel de then).

Ce que vous souhaitez réaliser n’est pas tout à fait clair, mais j’imagine que vous devriez créer un élément de données contenant response.data Et émettre votre appel api.get Dans le created hook . Quelque chose comme

export default {
  data() {
      return {
        //...
        messages: []
      };
  },
  created() {
    api.get(`/users/${this.value.username}/message/`, {
        'headers': {
          'Authorization': 'JWT ...'
        }
      })
      .then(response => this.messages = response.data);
  }
}
14
Roy J

es7 rend cela très simple en utilisant async et await conjointement avec la promesse retournée par axios. Vous aurez besoin du paquet vue-async-computed .

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