Demande Vue pour transmettre la valeur

Vue est un framework JavaScript populaire utilisé pour développer des applications Web à grande échelle. Dans Vue, il existe de nombreuses méthodes pour effectuer des requêtes HTTP et recevoir des réponses. Un scénario courant consiste à envoyer une requête au serveur dans un composant Vue et à transmettre les données de réponse comme état du composant. Dans cet article, nous explorerons ce processus et fournirons un exemple de code.

Tout d’abord, jetons un coup d’œil aux méthodes de requête HTTP dans Vue. La bibliothèque de requêtes HTTP la plus couramment utilisée dans Vue est axios. axios est un client HTTP basé sur Promise disponible dans le navigateur et Node.js. axios peut facilement exécuter des méthodes telles que GET, POST, PUT, etc. et fournit une bonne prise en charge pour obtenir et envoyer des données depuis le serveur. Si nous utilisons axios comme bibliothèque de requêtes dans cet article.

Voyons ensuite comment effectuer une requête HTTP dans le composant Vue.

1. Importer axios dans le composant Vue

Pour utiliser axios, nous devons l'importer dans le composant. Dans le composant Vue, vous pouvez utiliser le mot-clé import pour importer des axios. Voici un exemple :

import axios from 'axios'

2. Effectuer des requêtes HTTP dans les composants Vue

Nous pouvons effectuer des requêtes HTTP dans la fonction hook de cycle de vie du composant Vue, comme la fonction hook créée.

export default {
  created() {
    axios.get('http://example.com/api/data')
      .then(response => {
        console.log(response.data)
      })
  }
}

Dans cet exemple, nous avons effectué une requête GET en utilisant axios et imprimé les données de réponse dans la console.

3. Transmettre les données de réponse comme état du composant

Dans Vue, nous pouvons utiliser l'option data pour initialiser l'état du composant. Cependant, après avoir effectué une requête HTTP et obtenu les données de réponse du serveur, nous souhaiterons peut-être gérer ces données en tant qu'état du composant. Pour ce faire, nous pouvons définir un attribut de données dans le composant.

export default {
  data() {
    return {
      responseData: []
    }
  },
  created() {
    axios.get('http://example.com/api/data')
      .then(response => {
        this.responseData = response.data
      })
  }
}

Dans cet exemple, nous définissons un tableau appelé ResponseData. Ensuite, dans la fonction hook créée, nous effectuons la requête HTTP et attribuons les données de réponse obtenues du serveur au tableau. Puisque ResponseData fait désormais partie de l’état du composant, nous pouvons l’utiliser dans le composant pour restituer la vue.

4. Utiliser les données de réponse dans les modèles

L'une des fonctionnalités principales de Vue est la possibilité de lier l'état au modèle d'une vue. Nous pouvons utiliser les données de réponse dans le modèle du composant Vue pour restituer la vue.

<template>
  <div>
    <ul>
      <li v-for="item in responseData" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

Dans cet exemple, nous utilisons la directive v-for de Vue pour parcourir chaque élément du tableau réponseData et le restituer en tant qu'élément