You’re browsing the documentation for v2.x and earlier. For v3.x, click here.

Utiliser Axios pour consommer des API

Exemple simple

Lors de la création d’une application Web, il est fréquent que vous souhaitiez utiliser et afficher les données provenant d’une API. Il existe plusieurs manières de le faire, mais une approche très populaire consiste à utiliser axios, un client HTTP basé sur les Promesses.

Dans cet exemple, nous allons utiliser l’API CoinDesk pour afficher les prix du Bitcoin qui sont mis à jour toutes les minutes. Premièrement, nous devons installer axios avec npm/yarn ou à partir d’un lien CDN.

Il existe plusieurs manières d’interroger une API, mais il est préférable de d’abord connaitre la structure des données qu’elle renvoie afin de savoir ce qu’elle va afficher. Pour ce faire, nous allons appeler le point de terminaison de l’API et afficher le résultat afin que nous puissions connaître sa structure et son contenu. Nous pouvons voir dans la documentation de l’API de CoinDesk que l’appel doit être effectué à l’adresse https://api.coindesk.com/v1/bpi/currentprice.json. Nous allons donc commencer par créer une donnée qui gardera nos informations, puis nous récupérerons les données et les attribuerons à l’aide de l’étape mounted du cycle de vie :

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response))
  }
})

<div id="app">
  {{ info }}
</div>

Nous obtenons ceci :

Voir l’exemple Premiere étape Axios et Vue par Vue (@Vue) sur CodePen.

Parfait ! Nous avons des données. Mais cela semble assez désordonné pour le moment, alors affichons-les correctement et ajoutons un traitement d’erreur si les choses ne fonctionnent pas comme prévu, ou s’il faut plus de temps que nécessaire pour obtenir les informations.

Exemple concret : l’utilisation des données

Affichage des données d’une API

Il est assez courant que les informations dont nous avons besoin se trouvent dans la réponse. Nous devons parcourir ce que nous venons de stocker pour y accéder correctement. Dans notre cas, nous pouvons voir que les informations de prix dont nous avons besoin sont stockées dans response.data.bpi. Si nous l’utilisons, notre sortie sera :

axios
  .get('https://api.coindesk.com/v1/bpi/currentprice.json')
  .then(response => (this.info = response.data.bpi))

Voir l’exemple Premiere étape Axios et Vue par Vue (@Vue) sur CodePen.

C’est beaucoup plus facile à afficher ; nous pouvons donc mettre à jour notre code HTML pour n’afficher que les informations dont nous avons besoin à partir des données reçues. Pour ce faire, nous allons créer un filtre pour nous assurer que la décimale se trouve également à la place appropriée.

<div id="app">
  <h1>Bitcoin Price Index</h1>
  <div
    v-for="currency in info"
    class="currency"
  >
    {{ currency.description }}:
    <span class="lighten">
      <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
    </span>
  </div>
</div>

filters: {
  currencydecimal (value) {
    return value.toFixed(2)
  }
},

Voir l’exemple Troisieme étape Axios et Vue par Vue (@Vue) sur CodePen.

Travailler avec des erreurs

Parfois, nous ne pouvons pas recevoir de données de l’API. Il peut y avoir de nombreuses raisons pour qu’un appel puisse échouer. Par exemple :

• L’API est hors-service.
• La requête a mal été réalisée.
• L’API ne nous donne pas les informations dans le format attendu.

Quand nous créons cette requête, nous devrions vérifier si de tels cas se produisent et nous informer pour traiter ce problème. Dans un appel axios, nous pouvons le faire en utilisant catch.

axios
  .get('https://api.coindesk.com/v1/bpi/currentprice.json')
  .then(response => (this.info = response.data.bpi))
  .catch(error => console.log(error))

Cela nous permettra de savoir si quelque chose a échoué lors de la requête à l’API, mais que se passerait-il si les données sont endommagées ou si l’API est en panne ? Pour l’instant, l’utilisateur ne verra rien. Nous devrions peut-être créer un loader pour ce cas, puis informer l’utilisateur si nous ne pouvons pas obtenir les données.

new Vue({
  el: '#app',
  data () {
    return {
      info: null,
      loading: true,
      errored: false
    }
  },
  filters: {
    currencydecimal (value) {
      return value.toFixed(2)
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => {
        this.info = response.data.bpi
      })
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(() => this.loading = false)
  }
})

<div id="app">
  <h1>Bitcoin Price Index</h1>

  <section v-if="errored">
    <p>Nous sommes désolés, nous ne sommes pas en mesure de récupérer ces informations pour le moment. Veuillez réessayer ultérieurement.</p>
  </section>

  <section v-else>
    <div v-if="loading">Chargement...</div>

    <div
      v-else
      v-for="currency in info"
      class="currency"
    >
      {{ currency.description }}:
      <span class="lighten">
        <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
      </span>
    </div>

  </section>
</div>

Vous pouvez appuyer sur le bouton de réexécution de cet exemple pour connaitre brièvement l’état du chargement pendant la collecte des données à partir de l’API :

Voir l’exemple Quatrième étape Axios et Vue par Vue (@Vue) sur CodePen.

Cela peut encore être amélioré avec l’utilisation de composants pour différentes sections et un rapport d’erreurs plus distinct, en fonction de l’API utilisée et de la complexité de votre application.

Modèles alternatifs

Fetch API

L’API Fetch est une API native puissante pour ces types de demandes. Vous avez peut-être entendu dire que l’un des avantages de l’API Fetch est qu’il n’est pas nécessaire de charger une ressource externe pour l’utiliser, ce qui est vrai ! Sauf que… ce n’est pas encore complètement supporté, vous aurez donc toujours besoin d’utiliser un polyfill. Il y a aussi quelques pièges à éviter avec cette API, raison pour laquelle beaucoup préfèrent utiliser axios pour le moment. Cela pourrait cependant très bien changer dans le futur.

Si vous êtes intéressé par l’utilisation de l’API Fetch vous trouverez de très bons articles expliquant comment faire.

Aller plus loin

Il existe de nombreuses façons de travailler avec Vue et axios au-delà de la consommation et de l’affichage d’une API. Vous pouvez également communiquer avec des Fonctions Sans Serveur, publier / éditer / supprimer à partir d’une API où vous disposez d’un accès en écriture, et de nombreux autres avantages. En raison de l’intégration directe de ces deux bibliothèques, c’est devenu un choix très courant pour les développeurs qui doivent intégrer des clients HTTP à leur workflow.