Wie man GET-Anfragen mit Axios stellt: Ein Leitfaden für Anfänger

Beim Entwickeln von Webanwendungen ist das Abrufen von Daten von einer API eine häufige Aufgabe. JavaScript-Entwickler beginnen oft mit der eingebauten fetch()-Methode, stoßen aber bald auf Probleme – wie das manuelle Parsen von JSON-Antworten und umständliche Fehlerbehandlung. Axios vereinfacht HTTP-Anfragen, insbesondere GET-Anfragen, durch automatisches JSON-Parsing, bessere Fehlerbehandlung und einfachere Anpassung von Anfragen.

Was ist Axios?

Axios ist eine beliebte JavaScript-Bibliothek zum Erstellen von HTTP-Anfragen in Browsern und Node.js. Im Gegensatz zum eingebauten fetch() analysiert Axios automatisch JSON-Antworten, behandelt HTTP-Fehler einheitlich und unterstützt praktische Anfragefunktionen wie Abbruch und Timeouts.

Installation von Axios

Sie können Axios mit npm, Yarn installieren oder über CDN einbinden:

npm

npm install axios

Yarn

yarn add axios

CDN

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

Importieren Sie Axios in Ihr Projekt:

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

Eine einfache GET-Anfrage stellen

So können Sie ganz einfach eine grundlegende GET-Anfrage stellen:

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

Axios übernimmt das Abrufen und Parsen von JSON-Antworten automatisch.

Umgang mit Antwortdaten

Mit Axios benötigen Sie keine zusätzlichen Parsing-Schritte. Die zurückgegebene Antwort enthält eine data-Eigenschaft, die bereits im JavaScript-Objektformat vorliegt:

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => {
    console.log(res.data.title);  // Gibt den Titel aus der Antwort aus
  });

Fehlerbehandlung bei Axios GET-Anfragen

Axios behandelt Fehler intuitiv und erfasst sowohl HTTP- als auch Netzwerkprobleme. So können Sie diese Fehler klar verwalten:

axios.get('https://jsonplaceholder.typicode.com/invalid-url')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      console.error('HTTP error:', error.response.status);
    } else if (error.request) {
      console.error('No response:', error.request);
    } else {
      console.error('Request setup error:', error.message);
    }
  });

Verwendung von Abfrageparametern in Axios GET-Anfragen

Das Senden von Abfrageparametern mit Axios ist einfach:

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

Axios formatiert diese Parameter automatisch in eine Abfragezeichenfolge.

Verwendung von Async/Await mit Axios

Die Async/Await-Syntax macht Axios-Anfragen lesbarer:

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

fetchPosts();

Dies macht Ihren Code einfacher und übersichtlicher.

Setzen von Headern in Axios GET-Anfragen

Sie können Header (wie Authentifizierungs-Tokens) einfach setzen:

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

Damit können Sie benutzerdefinierte Header mühelos einbinden.

Mehrere GET-Anfragen mit Axios stellen

Wenn Sie mehrere Anfragen gleichzeitig benötigen, vereinfacht Axios dies:

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('Error:', error);
  });

Axios’ Umgang mit gleichzeitigen Anfragen hält Ihren Code effizient.

Fazit

Axios vereinfacht HTTP GET-Anfragen in JavaScript und beseitigt mühsame Aufgaben wie JSON-Parsing und komplizierte Fehlerbehandlung. Ob Sie einfache Anfragen senden, Abfrageparameter, benutzerdefinierte Header verwenden oder mehrere gleichzeitige Anfragen stellen – Axios hilft Ihnen, saubereren und wartungsfreundlicheren Code zu schreiben.

FAQs

Kann ich Axios in Node.js verwenden?

Ja, Axios funktioniert nahtlos sowohl in Node.js- als auch in Browser-Umgebungen.

Was ist der Hauptunterschied zwischen Axios und Fetch?

Axios bietet automatisches JSON-Parsing, bessere Fehlerbehandlung und zusätzliche Funktionen wie Anfragenabbruch, während Fetch minimalistisch ist und in Browser integriert ist.

Kann Axios andere Methoden als GET verarbeiten?

Ja, Axios unterstützt POST, PUT, DELETE und alle standardmäßigen HTTP-Methoden.