Kommunikation mit APIs mithilfe von Axios in React – Eine Schritt-für-Schritt-Anleitung

In einer React Anwendung ist die Interaktion mit APIs eine häufige Anforderung. Axios ist eine beliebte JavaScript Bibliothek, die den Prozess der Erstellung von HTTP-Anfragen und der Verarbeitung von Antworten vereinfacht. Diese Schritt-für-Schritt-Anleitung führt Sie durch den Prozess der Verwendung Axios in Ihrer React Anwendung zur Kommunikation mit APIs.

 

Installieren Axios

Öffnen Sie Ihren Projektordner im Terminal und führen Sie zur Installation den folgenden Befehl aus Axios: npm install axios

Importieren Sie Axios Ihre React Komponente mit dem folgenden Code: import axios from 'axios'

 

Senden von GET Anfragen

Verwenden Sie die Methode, um eine GET Anfrage zu senden und Daten von einer API abzurufen. axios.get()

Beispiel:

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);  
  });  

 

Senden von POST Anfragen

Verwenden Sie die Methode, um eine POST Anfrage zu senden und Daten an eine API zu senden. axios.post()

Beispiel:

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);  
  });  

 

Umgang mit Fehlern

Axios stellt mithilfe der Methode einen integrierten Fehlerbehandlungsmechanismus bereit catch().

Beispiel:

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);  
    }  
  });  

 

Integration mit RESTful-APIs

Axios unterstützt RESTful-APIs, indem es Ihnen die Angabe von HTTP-Methoden wie GET, POST, PUT und DELETE ermöglicht.

Beispiel:

// 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);  
  });  

 

Wenn Sie diese Schritte und Beispiele befolgen, können Sie effektiv mit den Axios in Ihrer React Anwendung verwendeten APIs kommunizieren.