Eine Seite, die die API aufruft

Teil des Abschnitts REST-APIs der Node.js-Journey von Coddy. Lektion 14 von 18.

Deine API hat noch keine Benutzeroberfläche. Eine Seite, die vom selben Server bereitgestellt wird, kann sie mit fetch aufrufen, ohne dass CORS erforderlich ist, da der Ursprung derselbe ist. express.static('public') stellt public/index.html unter / bereit.

const res = await fetch('/api/comments/3', { method: 'DELETE' });
if (!res.ok) {
    const { error } = await res.json();
    message.textContent = error.message;
}

res.ok ist bei jedem Status von 200 bis 299 true. Ein Body wird in der Option body übergeben, und für JSON sind zwei Dinge erforderlich: der Text von JSON.stringify(...) und der Header 'Content-Type': 'application/json', nach dem express.json() sucht. Ein FormData-Body sendet stattdessen Formularfelder, die diese API jedoch ablehnt. Die Prüfungen können das JavaScript einer Seite nicht ausführen: Sie prüfen, ob die Seite bereitgestellt wird, ob sie JSON sendet und welche API-Aufrufe sie tätigt.

Aufgabe

Einfach

Stelle den Ordner public mit express.static bereit, damit / public/index.html öffnet.
Beim Absenden des Formulars werden { "title" } als JSON an POST /api/tasks gesendet. Bei Erfolg leerst du das Formular und rufst load() auf; bei einem Fehler zeigst du error.message in #message an.

Öffne / in der Seitenansicht, füge eine Aufgabe hinzu und füge dann erneut dieselbe Bezeichnung hinzu.

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 res = await fetch('/api/tasks?limit=50');
            const page = await res.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();
            // 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>