Eine Seite, die die API aufruft

Teil des Abschnitts REST-APIs der Node.js-Journey von Coddy. Lektion 21 von 25.

Eine Seite ruft deine API mit fetch auf. Für einen POST sind drei Optionen erforderlich: Methode, Header und Body. Wandle das JavaScript-Objekt für den Body in JSON-Text um und kennzeichne diesen Text als application/json.

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

Das erste await empfängt die HTTP-Antwort. Das zweite liest ihren JSON-Body. response.ok gibt an, ob ihr Status im Erfolgsbereich liegt. Ein Status wie 400 oder 409 weist das fetch-Promise nicht zurück; es liefert eine Antwort, deren ok false ist. Der Formular- und Listencode wird bereitgestellt; konzentriere dich darauf, die Anfrage zu senden und ihr Ergebnis zu verarbeiten.

Die bereitgestellte Variable message verweist auf den Nachrichtenabsatz der Seite. Setze ihren textContent auf einen Anzeigetext oder auf eine leere Zeichenfolge, um ihn zu leeren:

message.textContent = data.error.message;
// Nach Erfolg zurücksetzen:
message.textContent = '';

Die Seite und die API haben denselben Ursprung, daher benötigt dieser Aufruf keine CORS-Berechtigung. FormData kodiert ein Formular anders als JSON; verwende JSON-Text, da diese API express.json() verwendet.

Aufgabe

Einfach

Deine API hat noch keine Benutzeroberfläche. Ergänze eine kleine Seite, die vom selben Server bereitgestellt wird und deren Formular über die API Aufgaben hinzufügt.

Stelle in server.js den Ordner public mit express.static bereit, sodass GET / public/index.html zurückgibt.
In public/index.html liest der Submit-Listener bereits den Titel aus. Sorge dafür, dass er die neue Aufgabe an die API sendet:
- Verwende die bereitgestellte Variable title, die den eingegebenen Text enthält.
- Sende sie mit fetch('/api/tasks', ...) als POST-Anfrage.
- Der Body ist JSON-Text, der mit JSON.stringify erstellt wird, zum Beispiel {"title":"Water the plants"}.
- Die Anfrage benötigt den Header 'Content-Type': 'application/json' in der Option headers von fetch. Andernfalls liest express.json() den Body nicht aus.
Wenn die Antwort OK ist (ihre Eigenschaft ok ist bei jedem Status von 200 bis 299 true), leere das Formular mit form.reset(), leere #message und rufe load() auf, damit die Liste die neue Aufgabe anzeigt.
Andernfalls enthält der Antwort-Body das zuvor gezeigte Fehlerformat, zum Beispiel:
```
{ "error": { "code": "conflict", "message": "A task with this title already exists" } }
```
Zeige den Wert von message im Absatz #message an.

Bei den Prüfungen wird das bereitgestellte Seitenskript mit einem kleinen simulierten Formular und der echten API dieser Lektion ausgeführt. Dabei werden eine Aufgabe und anschließend ein Duplikat gesendet; danach werden die Liste, das Formular und die Meldung überprüft. Probiere außerdem die tatsächliche Seite neben dem Editor aus.

Probiere es aus: Sende GET /. Die Seite wird in der Seitenansicht mit den 3 anfänglichen Aufgaben geöffnet. Gib "Water the plants" ein und drücke auf „Hinzufügen“: Das Eingabefeld wird geleert und die Aufgabe erscheint am Ende der Liste. Gib erneut "Water the plants" ein und drücke auf „Hinzufügen“: Die Liste bleibt unverändert und unter dem Formular erscheint "A task with this title already exists".

Probier es selbst

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Tasks</title>
</head>
<body>
    <h1>Tasks</h1>
    <ul id="list"></ul>
    <form id="add">
        <input name="title" placeholder="New task" required>
        <button>Add</button>
    </form>
    <p id="message"></p>
    <script>
        const list = document.querySelector('#list');
        const form = document.querySelector('#add');
        const message = document.querySelector('#message');

        async function load() {
            const response = await fetch('/api/tasks?limit=50');
            const page = await response.json();
            list.replaceChildren(...page.items.map((task) => {
                const item = document.createElement('li');
                item.textContent = (task.done ? '[x] ' : '[ ] ') + task.title;
                return item;
            }));
        }

        form.addEventListener('submit', async (event) => {
            event.preventDefault();
            const title = form.elements.title.value;
            // Send the title to POST /api/tasks as JSON. On success clear
            // the form and load() again; on an error show its message.
        });

        load();
    </script>
</body>
</html>