API-Aufrufe sind ein wichtiger Bestandteil der modernen Webentwicklung. JavaScript bietet mehrere Möglichkeiten, diese Aufgabe zu erfüllen, jede mit ihren eigenen Vor- und Nachteilen. In diesem Artikel werden Ihnen vier Hauptmethoden zum Durchführen von API-Aufrufen in JavaScript vorgestellt, die Sie in Ihren Projekten verwenden können.

XMLHttpRequest (XHR)

XMLHttpRequest (XHR) ist eine traditionelle Methode zum Aufrufen von APIs, die in allen Browserversionen unterstützt wird. Diese Methode ist zuverlässig und weit verbreitet, obwohl ihre Syntax manchmal schwieriger zu lesen und zu warten ist.

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(JSON.parse(xhr.responseText)); // Parse and log the response data
        } else {
            console.error('Error:', xhr.statusText); // Log any errors
        }
    }
};
xhr.send();

API abrufen

Fetch API ist eine modernere und einfachere Möglichkeit, API-Aufrufe basierend auf Versprechen durchzuführen. Es unterstützt asynchrone Vorgänge und lässt sich mithilfe von Async und Wait einfach erweitern.

fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => console.log(data)) // Log the response data
    .catch(error => console.error('Error:', error)); // Log any errors

Verwenden von Async und Wait.

async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        console.log(data); // Log the response data
    } catch (error) {
        console.error('Error:', error); // Log any errors
    }
}
fetchData();

Axios

Axios ist eine beliebte Bibliothek für HTTP-Anfragen, die eine einfache und konsistente Schnittstelle für API-Aufrufe bietet. Es muss zuerst mit npm oder Yarn installiert werden.
npm install axios
oder
Garn Axios hinzufügen

Dann können Sie Axios für API-Aufrufe verwenden:

const axios = require('axios');

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

Verwenden von Async und Wait:

async function fetchData() {
    try {
        const response = await axios.get("https://api.example.com/data");
        console.log(response.data); // Log the response data
    } catch (error) {
        console.error('Error:', error); // Log any errors
    }
}
fetchData();

jQuery AJAX

jQuery AJAX ist eine Methode zum Durchführen von API-Aufrufen mithilfe der jQuery-Bibliothek. Obwohl jQuery heutzutage weniger häufig verwendet wird, kommt es immer noch in älteren Projekten vor.

Quelle Foto:
RAKOZY, Greg. Bücher zum Website-Design. Online. In: Unsplash. 2016. Verfügbar unter: https://unsplash.com/photos/html-css-book-vw3Ahg4x1tY. [zit. 2024-07-16].