Umfassender Leitfaden zur JavaScript Fetch API: Grundlagen, Beispiele, Fehlerbehandlung und Sicherheit

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Einführung: Was ist die Fetch API?

JavaScript spielt eine entscheidende Rolle in der Front‑End‑Entwicklung für Webanwendungen. Unter seinen vielen Funktionen ist die Fetch API ein leistungsstarkes Werkzeug für die asynchrone Kommunikation mit Servern. In diesem Artikel erklären wir, wie man die Fetch API anfängerfreundlich nutzt und stellen ihre Funktionen anhand praktischer Beispiele vor.

Welche Rolle spielt die Fetch API?

Die Fetch API ist ein modernes, standardisiertes Interface zum Umgang mit HTTP‑Anfragen und -Antworten. Früher wurde häufig XMLHttpRequest verwendet, aber die Fetch API bietet ein einfacheres und intuitiveres Design.

Unterschiede zwischen Fetch API und XMLHttpRequest

Die wichtigsten Unterschiede zwischen der Fetch API und dem traditionellen XMLHttpRequest sind wie folgt.

Wie oben gezeigt, wird die Fetch API in der modernen Webentwicklung häufig als flexibleres und entwicklerfreundlicheres Werkzeug eingesetzt.

Häufige Anwendungsfälle der Fetch API

Die Fetch API wird typischerweise in den folgenden Szenarien verwendet.

1. Datenabruf: Abrufen von Benutzerinformationen oder Beitragsdaten von APIs.
2. Datenübermittlung: Senden von Formulardaten oder JSON‑Daten an einen Server.
3. Echtzeit‑Updates: Empfangen dynamischer Daten von einem Server und Aktualisieren des Seiteninhalts.
4. Integration externer APIs: Anbindung an Drittanbieter‑APIs, um die Funktionalität zu erweitern.

Aus diesen Gründen ist die Fetch API zu einem unverzichtbaren Bestandteil der modernen JavaScript‑Entwicklung geworden.

Zusammenfassung

In diesem Abschnitt haben wir die grundlegende Rolle und die Vorteile der Fetch API erklärt. Im Vergleich zum traditionellen XMLHttpRequest ist die Fetch API intuitiver, einfacher zu verwenden und basiert auf Promises, wodurch die Fehlerbehandlung vereinfacht wird. Im nächsten Abschnitt werden wir die grundlegende Nutzung der Fetch API anhand konkreter Code‑Beispiele untersuchen.

Im Weiteren lernen Sie, wie man Daten mit der Fetch API in der Praxis abruft und manipuliert.

2. Grundlegende Verwendung der Fetch API (mit Beispielcode)

In diesem Abschnitt erklären wir die grundlegende Verwendung der Fetch API anhand konkreter Code‑Beispiele. Auch Anfänger können problemlos folgen, beginnend mit einer einfachen GET‑Anfrage.

Grundsyntax der Fetch API

Die Grundsyntax der Fetch API wird unten gezeigt.

fetch(url, options)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle errors
  });

• url: Gibt die Anforderungs‑URL an.
• options: Wird verwendet, um HTTP‑Methoden und Header zu konfigurieren (optional).
• then: Verarbeitet die Antwort.
• catch: Behandelt Fehler.

Beispiel einer GET‑Anfrage

Unten finden Sie ein einfaches Beispiel für eine GET‑Anfrage.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('A network error occurred');
    }
    return response.json();
  })
  .then(data => {
    console.log(data); // Display data
  })
  .catch(error => {
    console.error('Error:', error);
  });

Verwendung von async/await

Mit modernem JavaScript können Sie saubereren Code mithilfe von async/await schreiben.

async function fetchPost() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) {
      throw new Error('A network error occurred');
    }
    const data = await response.json();
    console.log(data); // Display data
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchPost();

Hinzufügen von URL‑Parametern

Um Abfrageparameter einzuschließen, schreiben Sie die Anfrage wie folgt.

const userId = 1;
fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Zusammenfassung

In diesem Abschnitt haben wir die Grundlagen für das Erstellen von GET‑Anfragen mit der Fetch API behandelt.

• Grundsyntax: Einfaches und leicht verständliches Design.
• Fehlerbehandlung: Unterstützt sowohl Netzwerk- als auch HTTP-Fehler.
• async/await: Verbessert die Lesbarkeit und Wartbarkeit.
• URL-Parameter: Ermöglicht die einfache Implementierung dynamischer Bedingungen.

Der nächste Abschnitt erklärt, wie man die von der Fetch API zurückgegebenen Antwortdaten im Detail verarbeitet.

3. Antwortverarbeitung und Datenformatkonvertierung

In diesem Abschnitt erklären wir, wie man Antworten, die mit der Fetch API abgerufen wurden, verarbeitet. Wir konzentrieren uns besonders auf die Konvertierung von JSON-Daten sowie die Arbeit mit Text- und Binärdaten.

Was ist das Fetch API Response-Objekt?

Bei der Fetch API wird die nach einer Anfrage zurückgegebene Antwort als Response-Objekt bereitgestellt.

Haupt‑Eigenschaften

Abrufen und Konvertieren von JSON-Daten

Mit der Fetch API geben Server häufig Daten im JSON-Format zurück.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('Response error: ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Abrufen von Textdaten

In manchen Fällen muss man Daten als Klartext statt als JSON abrufen.

fetch('https://example.com/textfile.txt')
  .then(response => response.text())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Abrufen von Binärdaten

Um Bilder oder Dateien als Binärdaten abzurufen, verwendet man blob() oder arrayBuffer().

fetch('https://example.com/image.jpg')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    document.getElementById('image').src = url;
  })
  .catch(error => console.error('Error:', error));

Zusammenfassung

In diesem Abschnitt haben Sie gelernt, wie man Fetch API‑Antworten verarbeitet und Datenformate konvertiert.

• JSON‑Daten: Unterstützt das am häufigsten verwendete Server‑Antwortformat.
• Text‑ und Binärdaten: Abrufen verschiedener Formate nach Bedarf.
• Antwort‑Header: Nützlich für Datenverwaltung und Sicherheitsprüfungen.

4. Senden von POST-Anfragen (mit praktischen Beispielen)

In diesem Abschnitt erklären wir, wie man Daten mit POST-Anfragen über die Fetch API an einen Server sendet. Wir zeigen, wie man Formulardaten und JSON-Daten anhand praktischer Beispiele übermittelt.

Grundsyntax für eine POST-Anfrage

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})

• method: Gibt die zu verwendende HTTP‑Methode an (in diesem Fall POST).
• headers: Gibt das Datenformat an (z. B. JSON oder Formulardaten).
• body: Konvertiert die Daten in einen String und sendet sie.

Beispiel: Senden von JSON-Daten

const userData = {
  name: 'Taro Tanaka',
  email: 'taro.tanaka@example.com'
};

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch(error => console.error('Error:', error));

Beispiel: Senden von Formulardaten

const formData = new FormData();
formData.append('name', 'Taro Tanaka');
formData.append('email', 'taro.tanaka@example.com');

fetch('https://example.com/api/submit', {
  method: 'POST',
  body: formData
})
  .then(response => response.text())
  .then(data => console.log('Success:', data))
  .catch(error => console.error('Error:', error));

Beispiel: Anfrage mit Authentifizierung

fetch('https://example.com/api/protected', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
  },
  body: JSON.stringify({ query: 'data' })
})
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch(error => console.error('Error:', error));

Zusammenfassung

In diesem Abschnitt haben wir die Grundlagen und die praktische Anwendung von POST-Anfragen mit der Fetch API behandelt.

• JSON-Daten senden: Ideal für die API-Integration.
• Formulardaten senden: Funktioniert gut für einfache Formulare und Datei-Uploads.
• Authentifizierte Anfragen: Unterstützt die Sicherheitsanforderungen von APIs.

Der nächste Abschnitt geht tiefer auf die Fehlerbehandlung und Debugging-Techniken der Fetch API ein.

5. Fehlerbehandlung und Debugging-Techniken

In diesem Abschnitt werfen wir einen detaillierten Blick auf die Fehlerbehandlung und Debugging-Techniken bei der Verwendung der Fetch API.

Häufige Fehler bei der Fetch API

Grundlegende Fehlerbehandlung

fetch('https://jsonplaceholder.typicode.com/posts/9999')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .catch(error => console.error('Error:', error.message));

Umgang mit Zeitüberschreitungen

const controller = new AbortController();
const signal = controller.signal;

const timeout = setTimeout(() => controller.abort(), 5000);

fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(response => response.json())
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('Timeout: The request was aborted');
    } else {
      console.error('Error:', error.message);
    }
  })
  .finally(() => clearTimeout(timeout));

Debugging-Techniken

1. Ausgabe protokollieren:

   fetch('https://example.com/api/data')
     .then(response => {
       console.log('Status code:', response.status);
       return response.json();
     })
     .then(data => console.log('Data:', data))
     .catch(error => console.error('Error:', error.message));
   

2. Browser-Entwicklertools (Netzwerk-Tab):

• Anfragen und Antworten in Echtzeit inspizieren.

Zusammenfassung

In diesem Abschnitt haben wir die Fehlerbehandlung und Debugging-Techniken für die Fetch API untersucht.

• Häufige Fehler: Netzwerkfehler, JSON-Parsing-Fehler und Zeitüberschreitungsprobleme.
• Detaillierte Fehlerbehandlung: Praktische Beispiele mit klarer Fehlerbehandlungslogik.
• Debugging: Probleme mithilfe von Protokollen und Browser-Entwicklertools identifizieren.

Der nächste Abschnitt erklärt fortgeschrittene Nutzungsmuster und Sicherheitsmaßnahmen für die Fetch API.

6. Fortgeschrittene Nutzung und Sicherheitsmaßnahmen

In diesem Abschnitt erklären wir fortgeschrittene Nutzungstechniken und Sicherheitsaspekte für die Fetch API.

Abbrechen von Anfragen (AbortController)

const controller = new AbortController();
const signal = controller.signal;

fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(response => response.json())
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('The request was aborted');
    } else {
      console.error('Error:', error.message);
    }
  });

setTimeout(() => controller.abort(), 3000); // Abort after 3 seconds

Anfragen mit Authentifizierungsdaten

const token = 'YOUR_ACCESS_TOKEN';

fetch('https://example.com/api/protected', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => console.log('Data:', data))
  .catch(error => console.error('Error:', error));

CORS (Cross-Origin Resource Sharing) Unterstützung

fetch('https://example.com/api/data', {
  method: 'GET',
  mode: 'cors'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Zusammenfassung

In diesem Abschnitt haben wir die fortgeschrittene Nutzung der Fetch API und Sicherheitsmaßnahmen behandelt.

• Anfrageabbruch: Effizienzsteigerung durch Verwendung von AbortController.
• Authentifizierte Anfragen: Implementierung von API-Token und CSRF-Gegenmaßnahmen.
• CORS-Handling: Behandlung von Cross-Origin-Problemen durch korrekte Konfiguration.

7. Häufige Fehler und Fehlersuche (mit Zusammenfassungstabelle)

In diesem Abschnitt erklären wir häufige Fehler, die bei der Verwendung der Fetch API auftreten können, und wie man sie behebt.

Häufige Fehler und ihre Ursachen

Detaillierte Fehlerbehandlung

fetch('https://invalid-url.example.com')
  .then(response => response.json())
  .catch(error => {
    if (error.message.includes('Failed to fetch')) {
      console.error('Network error');
    } else {
      console.error('Other error:', error.message);
    }
  });

Zusammenfassung

In diesem Abschnitt haben wir häufige Fetch-API-Fehler und deren Handhabung überprüft.

• Typische Fehler: Netzwerkfehler, JSON-Formatfehler und Zeitüberschreitungsprobleme.
• Detaillierte Handhabung: Praktische Beispiele, die eine robuste Fehlerbehandlung demonstrieren.

8. Praktisches Beispiel: Aufbau einer einfachen Web-App mit API-Daten

In diesem Abschnitt erklären wir, wie man eine einfache Webanwendung erstellt, die Daten von einer externen API mithilfe der Fetch API abruft.

Vorbereitung des HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Fetch API Sample App</title>
</head>
<body>
  <h1>Post List</h1>
  <button id="fetchButton">Fetch Data</button>
  <ul id="postList"></ul>
  <p id="errorMessage" style="color: red;"></p>

  <script src="app.js"></script>
</body>
</html>

Erstellen des JavaScript-Codes

const fetchButton = document.getElementById('fetchButton');
const postList = document.getElementById('postList');
const errorMessage = document.getElementById('errorMessage');

async function fetchPosts() {
  fetchButton.disabled = true;
  errorMessage.textContent = '';
  postList.innerHTML = '';

  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    const posts = await response.json();
    posts.forEach(post => {
      const listItem = document.createElement('li');
      listItem.textContent = `${post.id}: ${post.title}`;
      postList.appendChild(listItem);
    });
  } catch (error) {
    errorMessage.textContent = 'Failed to retrieve data.';
  } finally {
    fetchButton.disabled = false;
  }
}

fetchButton.addEventListener('click', fetchPosts);

Zusammenfassung

In diesem Abschnitt haben wir gezeigt, wie man eine praktische Webanwendung mit der Fetch API erstellt.

• Kernfunktionen: Datenabruf und Listendarstellung.
• Fehlerbehandlung: Anzeige benutzerfreundlicher Meldungen bei Fehlern.

9. Fazit und nächste Schritte

In diesem Artikel haben wir die Fetch API umfassend behandelt, von den Grundlagen bis zu fortgeschrittener Nutzung und praktischen Beispielen. Im abschließenden Abschnitt fassen wir die wichtigsten Punkte jedes Abschnitts zusammen und geben Empfehlungen für das weitere Lernen.

Wichtigste Erkenntnisse

Grundstruktur und Funktionen der Fetch API

• Die Fetch API ist eine leistungsstarke Schnittstelle für die asynchrone Kommunikation mit Servern in JavaScript.
• Im Vergleich zum traditionellen XMLHttpRequest ist sie einfacher, flexibler und auf Promises basierend, was die Lesbarkeit erheblich verbessert.

Datenabruf und Antwortverarbeitung

• Wir haben erklärt, wie man JSON-, Text- und Binärdaten abruft.
• Durch die Verwendung von async/await kann man intuitiveren Code schreiben mit einfacherer Fehlerbehandlung.

Datenübermittlung und POST-Anfragen

• Sie haben gelernt, wie man JSON-Daten und Formulardaten an einen Server sendet.
• Sichere Anfragen mit Authentifizierungstoken wurden ebenfalls behandelt.

Fehlerbehandlung und Debugging-Techniken

• Wir haben praktische Lösungen für Netzwerkfehler und JSON-Parsing-Fehler vorgestellt.
• Fortgeschrittene Techniken wie Anforderungszeitüberschreitungen und das Abbrechen von Anfragen wurden implementiert.

Praktische Webanwendungen erstellen

• Sie haben eine Webanwendung erstellt, die Daten von einer externen API abruft und sie dynamisch in der Benutzeroberfläche anzeigt.
• Durch Fehlerbehandlung und Steuerung des Button-Zustands haben Sie Entwurfsmuster kennengelernt, die reale Entwicklungsszenarien widerspiegeln.

Nächste Schritte

Um die Fetch API noch besser zu nutzen, sollten Sie die folgenden Themen lernen.

Fortgeschrittene API-Implementierungstechniken

• Paginierung und Sortierung: Optimieren Sie die Verarbeitung bei großen Datensätzen.
• Suchfunktionalität: Implementieren Sie die Datenfilterung basierend auf Benutzereingaben.
• Datei-Uploads: Verarbeiten Sie Bild- und Video-Uploads.

Sicherheitsverbesserungen

• OAuth 2.0 und Authentifizierung: Verstehen Sie Authentifizierungs- und Autorisierungsprozesse für sichere API-Verbindungen.
• CSRF- und XSS-Schutz: Implementieren Sie sicherere Formularübermittlungen und schützen Sie sich vor bösartigen Skripten.

Integration mit modernen Technologien

• Axios-Bibliothek: Eine beliebte Alternative zur Fetch API, die das Management von HTTP-Anfragen vereinfacht.
• GraphQL: Ein modernes API-Designmodell, das die Datenabfrage im Vergleich zu REST-APIs optimiert.
• Echtzeitkommunikation: Implementieren Sie den Echtzeit-Datenaustausch mittels WebSocket oder Server-Sent Events.

Lernressourcen

Verwenden Sie die folgenden offiziellen Dokumentationen und Lernressourcen, um Ihre Fähigkeiten weiter zu verbessern.

• MDN Web Docs (Offiziell): Detaillierte Fetch API-Dokumentation
• JSONPlaceholder (Test-API): Eine kostenlose Dummy-API zum Testen
• JavaScript Lernseite: JavaScript.info

Abschließende Hinweise

Durch diesen Artikel haben Sie Wissen und praktische Fähigkeiten erworben, die alles von den Grundlagen bis zur realen Anwendung der Fetch API abdecken.
Die Fetch API wird häufig für Aufgaben verwendet, die von einfacher Datenabfrage bis zu komplexen API-Integrationen reichen. Indem Sie das hier Gelernte in realen Projekten anwenden, können Sie noch mehr praktische Erfahrung sammeln.

Nächste Schritte:

• Erstellen Sie kleine Projekte mit realen APIs, um praktische Erfahrung zu sammeln.
• Verstärken Sie die Fehlerbehandlung und Sicherheitsmaßnahmen, um die Produktionsreife zu erhöhen.
• Nutzen Sie neue Technologien wie GraphQL und Echtzeitkommunikation, um Ihr Skillset weiter auszubauen.