Una pagina che chiama l'API

Fa parte della sezione API REST del percorso Node.js di Coddy. Lezione 14 di 18.

La tua API non ha ancora una schermata. Una pagina servita dallo stesso server può chiamarla con fetch, senza bisogno di CORS, dato che l’origine è la stessa. express.static('public') serve public/index.html in corrispondenza di /.

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

res.ok è true per qualsiasi stato da 200 a 299. Un corpo viene inserito nell’opzione body, e per JSON servono due cose: il testo ottenuto da JSON.stringify(...) e l’intestazione 'Content-Type': 'application/json', che express.json() cerca. Un corpo FormData invia invece campi del modulo, che questa API rifiuta. I controlli non possono eseguire il JavaScript di una pagina: verificano che la pagina venga servita, che invii JSON e quali chiamate API effettui.

Sfida

Facile

Servi la cartella public con express.static, così / apre public/index.html.
L'invio del modulo invia { "title" } a POST /api/tasks come JSON. In caso di successo, svuota il modulo e chiama load(); in caso di errore, mostra error.message in #message.

Apri / nella visualizzazione della pagina, aggiungi un'attività, poi aggiungi di nuovo un'attività con lo stesso titolo.

Provalo tu

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