web-dev-qa-db-fra.com

A quel raccord de cycle de vie VueJS les demandes HTTP asynchrones doivent-elles être appelées?

J'aimerais savoir comment, avant de rendre une page, je souhaite envoyer une demande GET asynchrone à mon serveur afin de récupérer des données et de renseigner les propriétés correspondantes. J'ai entendu dire que la meilleure façon de le faire est d'appeler la fonction qui envoie cette demande dans l'un des trois hooks de cycle de vie proposés par Vue js et qui fonctionnent avant le rendu du DOM. Les trois sont beforeCreate(), created(), beforeMount(). Laquelle de ces demandes doit être appelée idéalement? Et pourquoi?

asynchronousvue.jsvuejs2lifecyclevue-resource
8
Baalateja Kataru

Le code d'initialisation de Vue est exécuté de manière synchrone.

Techniquement, tout code asynchrone que vous exécutez dans l'un de ces hooks ne répondra que lorsque tous ces hooks seront terminés. Voir la démo:

new Vue({
  el: '#app',
  beforeCreate() {
    setTimeout(() => { console.log('fastest asynchronous code ever') }, 0);
    console.log('beforeCreate hook done');
  },
  created() {
    console.log('created hook done');
  },
  beforeMount() {
    console.log('beforeMount hook done');
  },
  mounted() {
    console.log('mounted hook done');
  }
})
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="app">
  Check the console.
</div>

En d'autres termes, si vous passez un appel Ajax dans beforeCreate, quelle que soit la rapidité avec laquelle l'API répond, la réponse ne sera traitée que plus tard, une fois que la fonction created() aura été exécutée.


Qu'est-ce qui devrait guider votre décision, alors?

12
acdcjunior

Les documents de vue-router donnent des conseils sur les modèles à utiliser lors de la récupération des données d’un serveur requises pour le rendu du composant (voir la partie inférieure pour le lien).

Pour déterminer où exécuter la demande GET, ils vous demandent tout d’abord si vous souhaitez accéder à la route avant Une demande GET asynchrone est lancée ou après

Si vous voulez récupérer les données puis naviguez jusqu'à l'itinéraire (avant navigation), alors la documentation suggère d'exécuter la demande asynchrone dans la protection beforeRouteEnter() du composant entrant en veillant à appeler next() dans beforeRouteEnter() une fois que la demande de données async rempli. Si vous choisissez ce modèle, vous voudrez afficher une sorte d'indicateur de chargement, car la navigation vers l'itinéraire/le rendu du composant n'aura pas lieu tant que les données n'auront pas été récupérées.

Si vous souhaitez accéder à l'itinéraire, puis lancer la demande (après la navigation), les docs suggèrent de l'exécuter au crochet created() et d'utiliser v-if pour indiquer de manière conditionnelle que le composant est en cours de chargement, qu'une erreur s'est produite ou la vue une fois les données arrivées.

Je recommande vivement de consulter la documentation, ils ont des exemples de code et son bien écrit. https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-before-navigation

1
Bobby

Ça dépend.

Cela dépend de ce que vous voulez, pour une expérience utilisateur. Voulez-vous que la route soit affichée immédiatement, mais affichez une flèche de chargement sur le contenu de cette route?

Ou voulez-vous attendre que les données soient récupérées, ALORS indiquer l'itinéraire? (ce qui pourrait donner l'illusion d'une application lente)

Si vous voulez faire la première manière que j'ai mentionnée, vous pouvez le faire dans le hook créé de votre composant.

https://forum.vuejs.org/t/what-is-the-best-hook-tocall-api-to-load-initialisation-data-for-a-component/15167/2

1
Harry Adel

Comme mentionné ci-dessus, le principal problème qui existe dans Vue et React est que, si vous faites une demande réseau et que les données arrivent avant la création du composant, il n'y a pas d'instance pour définir les données.

beforeCreated est semblable à componentWillMount de React. En règle générale, vous ne voudriez pas exécuter de requête réseau ici, car vous pourriez récupérer vos données avant que le composant n'existe. C'est comme définir this.data = data mais il n'y a pas de composant, donc this n'existe pas encore.

Un meilleur endroit dans React est componentDidMount, mais nous ne nous en soucions pas. Dans Vue, un meilleur emplacement est created car le composant a déjà été créé, donc this existe.

Voici un exemple:

<template>
  <div>
    <span v-if="error">{{ error }}</span><br>
    I like:<br>
    {{ data }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: '',
      error: undefined,
    }
  },

  async created() {
    try {
      const response = await axios.get('/endpoint/stuff')
      this.data = response
    } catch (err) {
      this.error = err
    }
  },
}
</script>
0
agm1984