Comment consommer une API REST avec Axios dans Vue.js

Dans ce tutoriel, nous allons vous montrer comment consommer une API REST avec Axios dans Vue.js. Les API REST sont un moyen courant pour les applications Web de communiquer entre elles. Axios est une bibliothèque JavaScript qui facilite l'envoi de requêtes HTTP aux API REST.

Pour utiliser l'API REST avec Axios dans Vue.js, suivez ces étapes

Étape 1 : Installation et importation d'Axios
Étape 2 : Récupérer des données à l'aide de la requête GET dans Vue.js avec Axios
Étape 3 : Soumission de données à une API à l'aide d'une requête POST avec Axios dans Vue.js
Étape 4 : Création d'une instance de base Axios réutilisable dans Vue.js pour des appels d'API efficaces

Étape 1 : Installation et importation d'Axios

Vous pouvez installer Axios avec npm :

npm install axios --save

Ou avec du fil :

yarn add axios

Lors de l'intégration d'Axios dans votre projet Vue.js, il est nécessaire de l'importer.

import axios from 'axios';

Étape 2 : Récupérer des données à l'aide de la requête GET dans Vue.js avec Axios

Récupération de données dans les composants Vue.js à l'aide d'Axios dans des méthodes ou des crochets de cycle de vie.

<template>
  <div>
    <ul v-if="posts && posts.length">
      <li v-for="post of posts">
        <p><strong>{{post.title}}</strong></p>
        <p>{{post.body}}</p>
      </li>
    </ul>

    <ul v-if="errors && errors.length">
      <li v-for="error of errors">
        {{error.message}}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: [],
      errors: []
    }
  },
  created() {
    axios.get(`http://jsonplaceholder.typicode.com/posts`)
    .then(response => {
      // JSON responses are automatically parsed.
      this.posts = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  }
}
</script>

Le code ci-dessus est un exemple d'utilisation d'Axios dans un composant Vue.js pour extraire des données d'une API et les afficher dans le modèle.

Le modèle utilise les directives Vue pour restituer les données extraites de l'API. La v-ifdirective est utilisée pour vérifier si postsles errorspropriétés de données ont des valeurs, et si c'est le cas, elle restitue les éléments appropriés. La v-fordirective est utilisée pour parcourir le poststableau et afficher le titre et le corps de chaque article.

Dans la section script, Axios est importé et les données du composant sont définies pour avoir un tableau vide pour postset errors. Le created()hook de cycle de vie est utilisé pour envoyer la requête GET à l'API à l'aide de la axios.get()méthode, en transmettant l'URL du point de terminaison de l'API. La then()méthode est utilisée pour gérer la réponse réussie et définir la postspropriété data sur les données de réponse. La catch()méthode est utilisée pour gérer les erreurs et les transmettre à la errorspropriété data.

Cet exemple montre comment récupérer des données à partir d'une API à l'aide d'Axios et les afficher dans un composant Vue.js. Il montre également comment gérer les erreurs et les afficher dans le modèle.

La async/ await la version ressemblerait à ceci.

<template>
  <div>
    <ul v-if="posts && posts.length">
      <li v-for="post of posts">
        <p><strong>{{post.title}}</strong></p>
        <p>{{post.body}}</p>
      </li>
    </ul>

    <ul v-if="errors && errors.length">
      <li v-for="error of errors">
        {{error.message}}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: [],
      errors: []
    }
  },
  async created() {
    await axios.get(`http://jsonplaceholder.typicode.com/posts`)
    .then(response => {
      // JSON responses are automatically parsed.
      this.posts = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  }
}
</script>

Étape 3 : Soumission de données à une API à l'aide d'une requête POST avec Axios dans Vue.js

Vous pouvez utiliser Axios pour envoyer des requêtes POST, PUT, PATCHet DELETE .

<template>
  <div>
    <input type="text" v-model="postBody" @change="postPost()" />
    <ul v-if="errors && errors.length">
      <li v-for="error of errors">
        {{error.message}}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      postBody: '',
      errors: []
    }
  },

  methods: {
    // Pushes posts to the server when called.
    postPost() {
      axios.post(`http://jsonplaceholder.typicode.com/posts`, {
        body: this.postBody
      })
      .then(response => {})
      .catch(e => {
        this.errors.push(e)
      })
    }
  }
}
</script>

La async/ await la version ressemblerait à ceci :

<template>
  <div>
    <input type="text" v-model="postBody" @change="postPost()" />
    <ul v-if="errors && errors.length">
      <li v-for="error of errors">
        {{error.message}}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      postBody: '',
      errors: []
    }
  },

  methods: {
    // Pushes posts to the server when called.
    async postPost() {
      await axios.post(`http://jsonplaceholder.typicode.com/posts`, {
        body: this.postBody
      })
      .then(response => {})
      .catch(e => {
        this.errors.push(e)
      })
    }
  }
}
</script>

Ensuite, nous allons utiliser axios.create() pour créer une instance de base.

Étape 4 : Création d'une instance de base Axios réutilisable dans Vue.js pour des appels d'API efficaces

Axios vous permet de créer une instance de base qui peut être réutilisée dans votre application Vue.js. Cela peut être utile si vous effectuez de nombreux appels d'API vers le même serveur ou si vous devez inclure les mêmes en-têtes, tels qu'un en-tête d'autorisation, dans toutes vos demandes. La création d'une instance de base vous permet de définir une URL et une configuration de base communes qui seront utilisées pour tous les appels à l'instance, ce qui peut rendre votre code plus organisé et efficace.

axios.js

import axios from 'axios';

export const HTTP = axios.create({
  baseURL: `http://jsonplaceholder.typicode.com/`,
  headers: {
    Authorization: 'Bearer {token}'
  }
})

Vous pouvez maintenant utiliser HTTP dans votre composant :

<template>
  <div>
    <ul v-if="posts && posts.length">
      <li v-for="post of posts">
        <p><strong>{{post.title}}</strong></p>
        <p>{{post.body}}</p>
      </li>
    </ul>

    <ul v-if="errors && errors.length">
      <li v-for="error of errors">
        {{error.message}}
      </li>
    </ul>
  </div>
</template>

<script>
import { HTTP } from './axios';

export default {
  data() {
    return {
      posts: [],
      errors: []
    }
  },

  created() {
    HTTP.get(`posts`)
    .then(response => {
      this.posts = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  }
}
</script>

Conclusion

Axios est un outil puissant qui peut être utilisé dans un projet Vue.js pour gérer efficacement les tâches de gestion des données telles que le remplissage et le transfert de données vers une API REST. En important Axios et en l'utilisant directement dans vos composants, vous pouvez facilement récupérer des données à partir d'une méthode ou d'un hook de cycle de vie et gérer les erreurs de manière propre et organisée. De plus, en créant une instance de base réutilisable, vous pouvez partager une URL de base et une configuration communes pour tous les appels à l'instance, ce qui rend votre code plus efficace. L'utilisation d'Axios dans un projet Vue.js peut grandement simplifier la gestion des données et vous aider à interagir facilement et efficacement avec une API REST.