Uma página que chama a API

Parte da seção APIs REST do Journey de Node.js da Coddy. Lição 14 de 18.

Sua API ainda não tem uma tela. Uma página servida pelo mesmo servidor pode chamá-la com fetch, sem precisar de CORS, já que a origem é a mesma. express.static('public') serve public/index.html em /.

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

res.ok é true para qualquer status de 200 a 299. O corpo vai na opção body, e o JSON precisa de duas coisas: o texto de JSON.stringify(...) e o cabeçalho 'Content-Type': 'application/json', que express.json() procura. Em vez disso, um corpo FormData envia campos de formulário, e esta API os rejeita. As verificações não conseguem executar o JavaScript de uma página: elas verificam se a página é servida, se envia JSON e quais chamadas à API ela faz.

Desafio

Fácil

Sirva a pasta public com express.static, para que / abra public/index.html.
O envio do formulário envia { "title" } para POST /api/tasks como JSON. Em caso de sucesso, limpe o formulário e execute load(); em caso de erro, mostre error.message em #message.

Abra / na visualização da página, adicione uma tarefa e, em seguida, adicione novamente uma tarefa com o mesmo título.

Experimente você mesmo

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