close

Communiquer avec les API à l'aide Axios de in React- Un guide étape par étape

Dans une React application, interagir avec les API est une exigence courante. Axios est une bibliothèque populaire JavaScript qui simplifie le processus de création de requêtes HTTP et de traitement des réponses. Ce guide étape par étape vous guidera tout au long du processus d'utilisation Axios dans votre React application pour communiquer avec les API.

 

Installation Axios

Ouvrez votre dossier de projet dans le terminal et lancez la commande suivante pour installer Axios: npm install axios

Importez Axios dans votre React composant à l'aide du code suivant : import axios from 'axios'

 

Envoi GET de demandes

Pour envoyer une GET requête et récupérer des données à partir d'une API, utilisez la méthode. axios.get()

Exemple:

axios.get('https://api.example.com/data')  
  .then(response => {  
    // Handle the response data  
    console.log(response.data);  
  })  
  .catch(error => {  
    // Handle any errors  
    console.error(error);  
  });

 

Envoi POST de demandes

Pour envoyer une POST requête et envoyer des données à une API, utilisez la méthode. axios.post()

Exemple:

axios.post('https://api.example.com/data', { name: 'John', age: 25 })  
  .then(response => {  
    // Handle the response data  
    console.log(response.data);  
  })  
  .catch(error => {  
    // Handle any errors  
    console.error(error);  
  });

 

Gestion des erreurs

Axios fournit un mécanisme intégré de gestion des erreurs à l'aide de la catch() méthode.

Exemple:

axios.get('https://api.example.com/data')  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    // Handle the error  
    if(error.response) {  
      // The request was made, but the server responded with an error status code  
      console.error(error.response.data);  
    } else if(error.request) {  
      // The request was made but no response was received  
      console.error(error.request);  
    } else {  
      // Something else happened while setting up the request  
      console.error(error.message);  
    }  
  });

 

Intégration avec les API RESTful

Axios prend en charge les API RESTful en vous permettant de spécifier des méthodes HTTP telles que GET, POST, PUT et DELETE.

Exemple:

// GET request with query parameters
axios.get('https://api.example.com/data', { params: { page: 1, limit: 10 } })  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  
  
// POST request with data
axios.post('https://api.example.com/data', { name: 'John', age: 25 })  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  
  
// PUT request to update existing data  
axios.put('https://api.example.com/data/1', { name: 'John Doe' })  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  
  
// DELETE request to remove data  
axios.delete('https://api.example.com/data/1')  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });

 

En suivant ces étapes et ces exemples, vous serez en mesure de communiquer efficacement avec les API utilisées Axios dans votre React application.