Une page qui appelle l’API

Fait partie de la section API REST du Journey Node.js de Coddy. Leçon 14 sur 18.

Votre API n’a pas encore d’interface. Une page servie par le même serveur peut l’appeler avec fetch, sans avoir besoin de CORS, puisque l’origine est la même. express.static('public') sert public/index.html à l’adresse /.

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

res.ok vaut vrai pour tout code d’état de 200 à 299. Le corps est fourni dans l’option body, et JSON nécessite deux éléments : le texte de JSON.stringify(...) et l’en-tête 'Content-Type': 'application/json', que express.json() recherche. Un corps FormData envoie plutôt des champs de formulaire, que cette API refuse. Les vérifications ne peuvent pas exécuter le JavaScript d’une page : elles vérifient que la page est servie, qu’elle envoie du JSON et quels appels à l’API elle effectue.

Défi

Facile

Servez le dossier public avec express.static, afin que / ouvre public/index.html.
La soumission du formulaire envoie { "title" } à POST /api/tasks au format JSON. En cas de réussite, videz le formulaire et appelez load() ; en cas d’erreur, affichez error.message dans #message.

Ouvrez / dans la vue de la page, ajoutez une tâche, puis ajoutez de nouveau la même tâche.

Essayez vous-même

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