Comment faire des requêtes GET avec Axios : Un guide pour débutants

Lors de la création d’applications web, la récupération de données à partir d’une API est une tâche courante. Les développeurs JavaScript commencent souvent par utiliser la méthode intégrée fetch(), mais se heurtent rapidement à des problèmes — comme l’analyse manuelle des réponses JSON et une gestion d’erreurs fastidieuse. Axios simplifie la réalisation de requêtes HTTP, en particulier les requêtes GET, en offrant une analyse JSON automatique, une meilleure gestion des erreurs et une personnalisation plus facile des requêtes.

Qu’est-ce qu’Axios ?

Axios est une bibliothèque JavaScript populaire pour effectuer des requêtes HTTP dans les navigateurs et Node.js. Contrairement à la fonction intégrée fetch(), Axios analyse automatiquement les réponses JSON, traite les erreurs HTTP de manière cohérente et prend en charge des fonctionnalités pratiques comme l’annulation et les délais d’expiration.

Installation d’Axios

Vous pouvez installer Axios en utilisant npm, Yarn, ou l’inclure via CDN :

npm

npm install axios

Yarn

yarn add axios

CDN

<script src=""https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js""></script>

Importez Axios dans votre projet :

import axios from 'axios';
// ou
const axios = require('axios');

Effectuer une requête GET basique

Voici comment vous pouvez facilement effectuer une requête GET basique :

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Axios gère automatiquement la récupération et l’analyse des réponses JSON.

Traitement des données de réponse

Avec Axios, vous n’avez pas besoin d’étapes d’analyse supplémentaires. La réponse renvoyée contient une propriété data, déjà au format d’objet JavaScript :

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => {
    console.log(res.data.title);  // Affiche le titre de la réponse
  });

Gestion des erreurs dans les requêtes GET Axios

Axios gère les erreurs de manière intuitive, en captant à la fois les problèmes HTTP et réseau. Voici comment vous pouvez gérer ces erreurs clairement :

axios.get('https://jsonplaceholder.typicode.com/invalid-url')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      console.error('Erreur HTTP :', error.response.status);
    } else if (error.request) {
      console.error('Pas de réponse :', error.request);
    } else {
      console.error('Erreur de configuration de la requête :', error.message);
    }
  });

Utilisation des paramètres de requête dans les requêtes GET Axios

L’envoi de paramètres de requête avec Axios est facile :

axios.get('https://jsonplaceholder.typicode.com/posts', {
  params: { userId: 1 }
})
.then(response => {
  console.log(response.data);
});

Axios formate automatiquement ces paramètres en une chaîne de requête.

Utilisation d’Async/Await avec Axios

La syntaxe Async/Await rend les requêtes Axios plus lisibles :

async function fetchPosts() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data);
  } catch (error) {
    console.error('Erreur :', error);
  }
}

fetchPosts();

Cela rend votre code plus simple et plus propre.

Définition d’en-têtes dans les requêtes GET Axios

Vous pouvez définir facilement des en-têtes (comme des jetons d’authentification) :

axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer YOUR_API_TOKEN'
  }
})
.then(response => {
  console.log(response.data);
});

Cela vous permet d’inclure des en-têtes personnalisés sans effort.

Effectuer plusieurs requêtes GET avec Axios

Si vous avez besoin de plusieurs requêtes en même temps, Axios le simplifie :

const request1 = axios.get('https://jsonplaceholder.typicode.com/posts');
const request2 = axios.get('https://jsonplaceholder.typicode.com/users');

axios.all([request1, request2])
  .then(([posts, users]) => {
    console.log('Posts:', posts.data);
    console.log('Users:', users.data);
  })
  .catch(error => {
    console.error('Erreur:', error);
  });

La gestion par Axios des requêtes simultanées maintient l’efficacité de votre code.

Conclusion

Axios simplifie les requêtes HTTP GET en JavaScript, éliminant les tâches fastidieuses comme l’analyse JSON et la gestion complexe des erreurs. Que vous envoyiez des requêtes simples, utilisiez des paramètres de requête, des en-têtes personnalisés ou effectuiez plusieurs requêtes simultanées, Axios vous aide à écrire un code plus propre et plus maintenable.

FAQ