Strona wywołująca API

Część sekcji API REST ścieżki Node.js w Coddy. Lekcja 14 z 18.

Twoje API nie ma jeszcze ekranu. Strona udostępniana przez ten sam serwer może wywołać je za pomocą fetch, bez potrzeby korzystania z CORS, ponieważ źródło jest takie samo. express.static('public') udostępnia public/index.html pod adresem /.

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

res.ok ma wartość true dla każdego statusu od 200 do 299. Treść żądania umieszcza się w opcji body, a JSON wymaga dwóch rzeczy: tekstu z JSON.stringify(...) oraz nagłówka 'Content-Type': 'application/json', którego szuka express.json(). Treść typu FormData wysyła zamiast tego pola formularza, a to API ich nie przyjmuje. Testy nie mogą uruchamiać JavaScriptu strony: sprawdzają, czy strona jest udostępniana, czy wysyła JSON oraz jakie wywołania API wykonuje.

Wyzwanie

Łatwy

Udostępnij folder public za pomocą express.static, aby / otwierało public/index.html.
Wysłanie formularza przesyła { "title" } do POST /api/tasks jako JSON. Po powodzeniu wyczyść formularz i wywołaj load(); w przypadku błędu wyświetl error.message w #message.

Otwórz / w widoku strony, dodaj zadanie, a następnie ponownie dodaj zadanie z tym samym tytułem.

Spróbuj swoich sił

<!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>