fetch in JavaScript: Daten aus einer API auf der Seite

Problem

Ein leeres Schaufenster

Die Seite mit den Milchprodukten holt ihre Produkte vom Server. Heute hat der Server ein Problem und antwortet mit dem Fehler 500. Die Käuferin sieht eine Überschrift und darunter nichts.

HTML, CSS, JS

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Milchprodukte</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Milchprodukte</h1>
    <ul id="products"></ul>
  </body>
</html>

body { font-family: system-ui, sans-serif; margin: 0 16px; }
li { margin: 4px 0; }
#error { color: #b3261e; }
label { display: block; margin-top: 8px; }
.error { color: #b3261e; margin: 2px 0 0; min-height: 1.2em; }
button { font: inherit; margin-top: 12px; }

const list = document.querySelector('#products');
const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

function productItem(product) {
  const li = document.createElement('li');
  li.textContent = `${product.name}, ${money(product.price)}`;
  return li;
}

async function load() {
  const response = await fetch('/api/products?category=4');
  const products = await response.json();
  list.replaceChildren(...products.map(productItem));
}

load();

Die Konsole meldet products.map is not a function. Der Code hat die Antwort des Fehlers, { "error": "…" }, für eine Liste von Produkten gehalten. Die Käuferin sieht keinen Fehler und kein „Nochmal versuchen“. Und selbst wenn der Server funktioniert, ist die Seite leer, solange die Antwort unterwegs ist.

Die Idee

fetch auf der Seite

fetch(address) schickt eine Anfrage und gibt ein Versprechen (Promise) auf die Antwort zurück. Mit await wartet die Funktion auf die Antwort, ohne die Seite anzuhalten:

const response = await fetch('/api/products?category=4');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const products = await response.json();

fetch wirft nur, wenn es keine Antwort gibt: kein Netz. Eine Antwort mit 404 oder 500 ist eine Antwort, und das Promise wird erfüllt.
response.ok ist nur für Codes von 200 bis 299 wahr. Das zu prüfen ist deine Aufgabe.
response.json() liest den Body und macht daraus ein Objekt. Auch das ist ein Promise, also bekommt es ebenfalls await.

In der Sandbox beantwortet die Schein-API des Shops die Adressen /api/…, ganz ohne Netz: GET /api/products (mit ?q= und ?category=), /api/products/3, /api/categories, /api/orders und POST /api/orders. Eine Lektion kann sie langsam machen, mit 500 antworten lassen oder eine leere Liste zurückgeben lassen. So ist jeder Zustand echt und immer derselbe.

Die Idee

Vier Zustände

Eine Anfrage braucht Zeit und hat ein Ergebnis. Der Bildschirm muss in jedem Moment sagen, was gerade los ist:

Laden: Die Anfrage ist unterwegs, es gibt noch keine Antwort;
Daten: Eine Liste von Produkten ist angekommen;
leer: Eine Liste ist angekommen, aber sie ist leer. Das ist kein Fehler;
Fehler: Es gibt keine Antwort, oder die Antwort ist nicht ok.

Jeder Zustand ist ein Element im HTML. Der Code zeigt und versteckt die Elemente mit der Property hidden:

<p id="loading" role="status">Wird geladen…</p>
<p id="error" role="alert" hidden></p>
<p id="empty" hidden>Keine Produkte in dieser Kategorie.</p>
<ul id="products"></ul>

„Wird geladen…“ ist von Anfang an sichtbar, noch bevor JavaScript überhaupt läuft. role="status" sorgt dafür, dass ein Screenreader es vorliest, und role="alert" liest den Fehler vor, sobald er erscheint.

Sieh es dir an

Eine Anfrage beobachten

async function load() {
  try {
    const response = await fetch('/api/products?category=4');
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const products = await response.json();
    empty.hidden = products.length > 0;
    list.replaceChildren(...products.map(productItem));
  } catch {
    error.textContent = 'Die Produkte wurden nicht geladen.';
    error.hidden = false;
  } finally {
    loading.hidden = true;
  }
}

Schritt für Schritt, in Worten

load() schickt die Anfrage los. Eine Antwort gibt es noch nicht: Der Bildschirm zeigt „Wird geladen…“ aus dem HTML.
await wartet, aber die Seite friert nicht ein: Die Käuferin kann scrollen, und der Spinner dreht sich. Bei einem langsamen Netz dauert das Sekunden.
200 mit einem Array: ok ist true, json() liefert die Produkte, die Zeilen werden gezeichnet, und finally versteckt „Wird geladen…“.
Dieselbe Anfrage, Antwort 500. fetch wirft nichts: Es hat eine Antwort bekommen. Unsere Prüfung von ok wirft, und catch zeigt den Fehler.
200 mit []: Das ist kein Fehler. Das Array ist leer, deshalb sagt die Seite „keine Produkte“, statt eine Leerstelle zu zeigen.
Vier Zustände, jeder sichtbar: Laden, Daten, Fehler, leer. finally versteckt „Wird geladen…“ bei jedem Ausgang aus try.

Derselbe Code, drei verschiedene Antworten. Bei 500 wirft fetch nichts: Die Prüfung von ok wirft, und catch zeigt den Fehler. finally versteckt „Wird geladen…“ in allen drei Fällen.

Sieh es dir an

Die langsame API

Hier antwortet die API nach 1,2 Sekunden. Klick auf „Ausführen“ und beobachte „Wird geladen…“.

HTML, CSS, JS

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Milchprodukte</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Milchprodukte</h1>
    <p id="loading" role="status">Wird geladen…</p>
    <p id="error" role="alert" hidden></p>
    <p id="empty" hidden>Keine Produkte in dieser Kategorie.</p>
    <ul id="products"></ul>
  </body>
</html>

body { font-family: system-ui, sans-serif; margin: 0 16px; }
li { margin: 4px 0; }
#error { color: #b3261e; }
label { display: block; margin-top: 8px; }
.error { color: #b3261e; margin: 2px 0 0; min-height: 1.2em; }
button { font: inherit; margin-top: 12px; }

const loading = document.querySelector('#loading');
const error = document.querySelector('#error');
const empty = document.querySelector('#empty');
const list = document.querySelector('#products');
const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

function productItem(product) {
  const li = document.createElement('li');
  li.textContent = `${product.name}, ${money(product.price)}`;
  return li;
}

async function load() {
  try {
    const response = await fetch('/api/products?category=4');
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const products = await response.json();
    empty.hidden = products.length > 0;
    list.replaceChildren(...products.map(productItem));
  } catch {
    error.textContent = 'Die Produkte wurden nicht geladen.';
    error.hidden = false;
  } finally {
    loading.hidden = true;
  }
}

load();

Der ganze Code zum Laden:

async function load() {
  try {
    const response = await fetch('/api/products?category=4');
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const products = await response.json();
    empty.hidden = products.length > 0;
    list.replaceChildren(...products.map(productItem));
  } catch {
    error.textContent = 'Die Produkte wurden nicht geladen.';
    error.hidden = false;
  } finally {
    loading.hidden = true;
  }
}

load();

Probier es aus

Fehler

Hier bekommt die erste Anfrage eine 500, und die zweite geht durch. Bei einem Fehler soll die Seite „Die Produkte wurden nicht geladen.“ in #error und den Button „Nochmal versuchen“ zeigen, „Wird geladen…“ soll verschwinden, und „keine Produkte“ darf nicht erscheinen. Der Button lädt schon wieder neu: Danach müssen die Produkte auf der Seite stehen.

HTML, CSS, JS

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Milchprodukte</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Milchprodukte</h1>
    <p id="loading" role="status">Wird geladen…</p>
    <p id="error" role="alert" hidden></p>
    <button id="retry" hidden>Nochmal versuchen</button>
    <p id="empty" hidden>Keine Produkte in dieser Kategorie.</p>
    <ul id="products"></ul>
  </body>
</html>

body { font-family: system-ui, sans-serif; margin: 0 16px; }
li { margin: 4px 0; }
#error { color: #b3261e; }
label { display: block; margin-top: 8px; }
.error { color: #b3261e; margin: 2px 0 0; min-height: 1.2em; }
button { font: inherit; margin-top: 12px; }

const loading = document.querySelector('#loading');
const error = document.querySelector('#error');
const empty = document.querySelector('#empty');
const list = document.querySelector('#products');
const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

function productItem(product) {
  const li = document.createElement('li');
  li.textContent = `${product.name}, ${money(product.price)}`;
  return li;
}
const retry = document.querySelector('#retry');

retry.addEventListener('click', () => {
  retry.hidden = true;
  error.hidden = true;
  loading.hidden = false;
  load();
});

async function load() {
  const response = await fetch('/api/products?category=4');
  const products = await response.json();
  loading.hidden = true;
  empty.hidden = products.length > 0;
  list.replaceChildren(...products.map(productItem));
}

load();

Lösung

index.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Milchprodukte</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Milchprodukte</h1>
    <p id="loading" role="status">Wird geladen…</p>
    <p id="error" role="alert" hidden></p>
    <button id="retry" hidden>Nochmal versuchen</button>
    <p id="empty" hidden>Keine Produkte in dieser Kategorie.</p>
    <ul id="products"></ul>
  </body>
</html>

style.css

body { font-family: system-ui, sans-serif; margin: 0 16px; }
li { margin: 4px 0; }
#error { color: #b3261e; }
label { display: block; margin-top: 8px; }
.error { color: #b3261e; margin: 2px 0 0; min-height: 1.2em; }
button { font: inherit; margin-top: 12px; }

script.js

const loading = document.querySelector('#loading');
const error = document.querySelector('#error');
const empty = document.querySelector('#empty');
const list = document.querySelector('#products');
const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

function productItem(product) {
  const li = document.createElement('li');
  li.textContent = `${product.name}, ${money(product.price)}`;
  return li;
}
const retry = document.querySelector('#retry');

retry.addEventListener('click', () => {
  retry.hidden = true;
  error.hidden = true;
  loading.hidden = false;
  load();
});

async function load() {
  try {
    const response = await fetch('/api/products?category=4');
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const products = await response.json();
    empty.hidden = products.length > 0;
    list.replaceChildren(...products.map(productItem));
  } catch {
    error.textContent = 'Die Produkte wurden nicht geladen.';
    error.hidden = false;
    retry.hidden = false;
  } finally {
    loading.hidden = true;
  }
}

load();

Probier es aus

Leer

Hier gibt die API eine leere Liste zurück. Zeige „Keine Produkte in dieser Kategorie.“, wenn es null Produkte sind, und verstecke die Meldung, wenn es welche gibt.

HTML, CSS, JS

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Milchprodukte</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Milchprodukte</h1>
    <p id="loading" role="status">Wird geladen…</p>
    <p id="error" role="alert" hidden></p>
    <p id="empty" hidden>Keine Produkte in dieser Kategorie.</p>
    <ul id="products"></ul>
  </body>
</html>

body { font-family: system-ui, sans-serif; margin: 0 16px; }
li { margin: 4px 0; }
#error { color: #b3261e; }
label { display: block; margin-top: 8px; }
.error { color: #b3261e; margin: 2px 0 0; min-height: 1.2em; }
button { font: inherit; margin-top: 12px; }

const loading = document.querySelector('#loading');
const error = document.querySelector('#error');
const empty = document.querySelector('#empty');
const list = document.querySelector('#products');
const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

function productItem(product) {
  const li = document.createElement('li');
  li.textContent = `${product.name}, ${money(product.price)}`;
  return li;
}

async function load() {
  try {
    const response = await fetch('/api/products?category=4');
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const products = await response.json();
    list.replaceChildren(...products.map(productItem));
  } catch {
    error.textContent = 'Die Produkte wurden nicht geladen.';
    error.hidden = false;
  } finally {
    loading.hidden = true;
  }
}

load();

Lösung

index.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Milchprodukte</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Milchprodukte</h1>
    <p id="loading" role="status">Wird geladen…</p>
    <p id="error" role="alert" hidden></p>
    <p id="empty" hidden>Keine Produkte in dieser Kategorie.</p>
    <ul id="products"></ul>
  </body>
</html>

style.css

body { font-family: system-ui, sans-serif; margin: 0 16px; }
li { margin: 4px 0; }
#error { color: #b3261e; }
label { display: block; margin-top: 8px; }
.error { color: #b3261e; margin: 2px 0 0; min-height: 1.2em; }
button { font: inherit; margin-top: 12px; }

script.js

const loading = document.querySelector('#loading');
const error = document.querySelector('#error');
const empty = document.querySelector('#empty');
const list = document.querySelector('#products');
const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

function productItem(product) {
  const li = document.createElement('li');
  li.textContent = `${product.name}, ${money(product.price)}`;
  return li;
}

async function load() {
  try {
    const response = await fetch('/api/products?category=4');
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const products = await response.json();
    empty.hidden = products.length > 0;
    list.replaceChildren(...products.map(productItem));
  } catch {
    error.textContent = 'Die Produkte wurden nicht geladen.';
    error.hidden = false;
  } finally {
    loading.hidden = true;
  }
}

load();

Probier es aus

Finde den Fehler

Der Server antwortet mit 200 und Produkten, und die Seite zeigt einen Fehler.

Wähle die Zeile mit dem Fehler.

Die Idee

Senden: der Button und das Warten

Die Bestellung geht mit POST raus. Die Daten stehen als JSON im Body, und der Header Content-Type sagt dem Server, was er bekommt:

const response = await fetch('/api/orders', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ ...data, items }),
});

data ist das Objekt aus den Feldern des Formulars: Object.fromEntries(new FormData(form)) macht aus den Paaren name=Wert ein Objekt { name: …, email: …, address: … }.

Während die Antwort unterwegs ist, ist der Button „Bestellen“ noch aktiviert. Eine ungeduldige Käuferin drückt zweimal:

HTML, CSS, JS

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Schnellbestellung</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Schnellbestellung</h1>
    <p>Weißbrot × 2, Frischmilch × 1</p>
    <form id="order">
      <label>Name <input name="name" value="Lena Fischer"></label>
      <label>E-Mail <input name="email" value="lena@example.com"></label>
      <label>Adresse <input name="address" value="Schillerstraße 7"></label>
      <button>Bestellen</button>
    </form>
    <p id="result" role="status"></p>
  </body>
</html>

body { font-family: system-ui, sans-serif; margin: 0 16px; }
li { margin: 4px 0; }
#error { color: #b3261e; }
label { display: block; margin-top: 8px; }
.error { color: #b3261e; margin: 2px 0 0; min-height: 1.2em; }
button { font: inherit; margin-top: 12px; }

const items = [{ productId: 1, qty: 2 }, { productId: 5, qty: 1 }];
const form = document.querySelector('#order');
const button = form.querySelector('button');
const result = document.querySelector('#result');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const data = Object.fromEntries(new FormData(form));
  const response = await fetch('/api/orders', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ ...data, items }),
  });
  const order = await response.json();
  result.textContent = `Bestellung ${order.id} ist angenommen.`;
});

Zwei Anfragen, zwei Bestellungen: 61 und 62. Die Seite zeigt die letzte, und niemand merkt, dass auch die erste angenommen wurde.

Probier es aus

Ein Klick, eine Bestellung

Deaktiviere den Button „Bestellen“, bevor die Anfrage losgeht, und aktiviere ihn wieder, wenn die Antwort kommt, auch wenn es ein Fehler ist. Die Prüfung klickt schnell zweimal und erwartet eine Bestellung: 61.

HTML, CSS, JS

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Schnellbestellung</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Schnellbestellung</h1>
    <p>Weißbrot × 2, Frischmilch × 1</p>
    <form id="order">
      <label>Name <input name="name" value="Lena Fischer"></label>
      <label>E-Mail <input name="email" value="lena@example.com"></label>
      <label>Adresse <input name="address" value="Schillerstraße 7"></label>
      <button>Bestellen</button>
    </form>
    <p id="result" role="status"></p>
  </body>
</html>

body { font-family: system-ui, sans-serif; margin: 0 16px; }
li { margin: 4px 0; }
#error { color: #b3261e; }
label { display: block; margin-top: 8px; }
.error { color: #b3261e; margin: 2px 0 0; min-height: 1.2em; }
button { font: inherit; margin-top: 12px; }

const items = [{ productId: 1, qty: 2 }, { productId: 5, qty: 1 }];
const form = document.querySelector('#order');
const button = form.querySelector('button');
const result = document.querySelector('#result');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const data = Object.fromEntries(new FormData(form));
  const response = await fetch('/api/orders', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ ...data, items }),
  });
  const order = await response.json();
  result.textContent = `Bestellung ${order.id} ist angenommen.`;
});

Lösung

index.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Schnellbestellung</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Schnellbestellung</h1>
    <p>Weißbrot × 2, Frischmilch × 1</p>
    <form id="order">
      <label>Name <input name="name" value="Lena Fischer"></label>
      <label>E-Mail <input name="email" value="lena@example.com"></label>
      <label>Adresse <input name="address" value="Schillerstraße 7"></label>
      <button>Bestellen</button>
    </form>
    <p id="result" role="status"></p>
  </body>
</html>

style.css

body { font-family: system-ui, sans-serif; margin: 0 16px; }
li { margin: 4px 0; }
#error { color: #b3261e; }
label { display: block; margin-top: 8px; }
.error { color: #b3261e; margin: 2px 0 0; min-height: 1.2em; }
button { font: inherit; margin-top: 12px; }

script.js

const items = [{ productId: 1, qty: 2 }, { productId: 5, qty: 1 }];
const form = document.querySelector('#order');
const button = form.querySelector('button');
const result = document.querySelector('#result');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  button.disabled = true;
  try {
    const data = Object.fromEntries(new FormData(form));
    const response = await fetch('/api/orders', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ ...data, items }),
    });
    const order = await response.json();
    result.textContent = `Bestellung ${order.id} ist angenommen.`;
  } finally {
    button.disabled = false;
  }
});

Genauer, für Neugierige

Ein Netzwerkfehler. Ohne Netz wirft fetch TypeError: Failed to fetch. catch fängt das und auch dein eigenes throw bei !response.ok: Für die Käuferin heißt beides „nicht geladen“.

Der Body eines Fehlers. Ein Server erklärt den Fehler oft im Body, als JSON. Bei 400 gibt die Schein-API { "errors": { "email": "…" } } zurück: einen Fehler pro Feld. Deshalb liest die Aufgabe den Body auch bei einem Fehler.

Nochmal versuchen. Ein Button „Nochmal versuchen“ neben dem Fehler ruft einfach noch einmal load() auf. Vorher muss „Wird geladen…“ wieder erscheinen und der Fehler verschwinden.

Ein Wettlauf zwischen Anfragen. Wechselt die Käuferin schnell zweimal die Kategorie, können die beiden Antworten in umgekehrter Reihenfolge ankommen, und die Seite zeigt die alte Kategorie. Wie du eine alte Anfrage abbrichst (AbortController), steht im Modul über Effekte.

Prüfungen im Browser und auf dem Server. required und type="email" halten das Formular auf, bevor es rausgeht. Der Server prüft trotzdem noch einmal, denn eine Anfrage kann auch ohne unsere Seite kommen. In der Aufgabe haben die Felder keine eingebauten Prüfungen, damit du siehst, was der Server antwortet.

Übung

Die Bestellung

Sende die Bestellung: POST /api/orders mit name, email und address aus dem Formular und items aus dem Array. Solange sie unterwegs ist, ist der Button deaktiviert. Setze bei 400 jede Meldung aus errors in den Absatz unter ihrem Feld (#email-error und so weiter) und lösche bei jedem neuen Senden die alten Meldungen. Schreibe bei Erfolg „Bestellung 61 ist angenommen. Gesamt: 4,00 €“ in #result (die Nummer und die Summe kommen aus der Antwort).

HTML, CSS, JS

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Bestellung</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Bestellung</h1>
    <p>Weißbrot × 2, Frischmilch × 1</p>
    <p class="error" id="items-error"></p>
    <form id="order">
      <label>Name <input name="name"></label>
      <p class="error" id="name-error"></p>
      <label>E-Mail <input name="email"></label>
      <p class="error" id="email-error"></p>
      <label>Adresse <input name="address"></label>
      <p class="error" id="address-error"></p>
      <button>Bestellen</button>
    </form>
    <p id="result" role="status"></p>
  </body>
</html>

body { font-family: system-ui, sans-serif; margin: 0 16px; }
li { margin: 4px 0; }
#error { color: #b3261e; }
label { display: block; margin-top: 8px; }
.error { color: #b3261e; margin: 2px 0 0; min-height: 1.2em; }
button { font: inherit; margin-top: 12px; }

const items = [{ productId: 1, qty: 2 }, { productId: 5, qty: 1 }];
const form = document.querySelector('#order');
const button = form.querySelector('button');
const result = document.querySelector('#result');
const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  // Dein Code: Sende die Bestellung und zeige die Antwort an.
});

Lösung

index.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Bestellung</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Bestellung</h1>
    <p>Weißbrot × 2, Frischmilch × 1</p>
    <p class="error" id="items-error"></p>
    <form id="order">
      <label>Name <input name="name"></label>
      <p class="error" id="name-error"></p>
      <label>E-Mail <input name="email"></label>
      <p class="error" id="email-error"></p>
      <label>Adresse <input name="address"></label>
      <p class="error" id="address-error"></p>
      <button>Bestellen</button>
    </form>
    <p id="result" role="status"></p>
  </body>
</html>

style.css

body { font-family: system-ui, sans-serif; margin: 0 16px; }
li { margin: 4px 0; }
#error { color: #b3261e; }
label { display: block; margin-top: 8px; }
.error { color: #b3261e; margin: 2px 0 0; min-height: 1.2em; }
button { font: inherit; margin-top: 12px; }

script.js

const items = [{ productId: 1, qty: 2 }, { productId: 5, qty: 1 }];
const form = document.querySelector('#order');
const button = form.querySelector('button');
const result = document.querySelector('#result');
const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  button.disabled = true;
  result.textContent = '';
  for (const p of document.querySelectorAll('.error')) p.textContent = '';
  try {
    const data = Object.fromEntries(new FormData(form));
    const response = await fetch('/api/orders', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ ...data, items }),
    });
    const answer = await response.json();
    if (response.status === 400) {
      for (const [name, message] of Object.entries(answer.errors)) {
        document.querySelector(`#${name}-error`).textContent = message;
      }
    } else if (response.ok) {
      result.textContent = `Bestellung ${answer.id} ist angenommen. Gesamt: ${money(answer.total)}`;
    } else {
      result.textContent = 'Die Bestellung wurde nicht gesendet. Versuch es noch einmal.';
    }
  } finally {
    button.disabled = false;
  }
});

Test

Teste dich

1. Der Server antwortet mit 500. Was macht await fetch(…)?Es wartet, bis der Server mit 200 antwortetEs gibt eine Antwort mit ok === false und status === 500 zurück; es wirft keinen FehlerEs wirft einen Fehler, den catch fängt

fetch wirft nur, wenn es gar keine Antwort gibt: kein Netz, eine Adresse, die es nicht gibt. 404 und 500 sind Antworten. Deshalb prüft der Code response.ok selbst.

2. Die API gibt [] zurück. Welche Bedingung zeigt „keine Produkte“ an?products === null!productsproducts.length === 0

Ein leeres Array ist in einer Bedingung „wahr“, also ist !products falsch. Leer erkennst du an der Länge.

3. Warum wird der Button „Bestellen“ deaktiviert, bevor die Anfrage losgeht, und nicht danach?Weil ein deaktivierter Button die Anfrage schneller sendetWeil fetch nicht startet, solange der Button aktiviert istSolange die Anfrage wartet, würde ein zweiter Klick eine zweite Bestellung senden

Die Antwort kommt nach Hunderten von Millisekunden. Wird der Button erst nach await deaktiviert, ist der zweite Klick schon durchgegangen. In finally wird er wieder aktiviert, damit er nach einem Fehler nicht deaktiviert bleibt.

4. Warum wird „Wird geladen…“ in finally versteckt?finally läuft vor tryOhne finally zeigt der Browser die Antwort nicht anfinally läuft nach Erfolg und nach einem Fehler, deshalb bleibt die Meldung nicht für immer stehen

Steht das Verstecken nur in try, bleibt „Wird geladen…“ nach einem Fehler neben der Fehlermeldung stehen. finally ist der Ort für alles, was bei jedem Ausgang passieren muss.

Daten aus einer API

Cookies