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