Una página que llama a la API

Parte de la sección API REST del Journey de Node.js de Coddy. Lección 14 de 18.

Tu API todavía no tiene interfaz. Una página servida por el mismo servidor puede llamarla con fetch, sin necesidad de CORS, ya que el origen es el mismo. express.static('public') sirve public/index.html en /.

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

res.ok es true para cualquier estado entre 200 y 299. El cuerpo va en la opción body, y JSON necesita dos cosas: el texto de JSON.stringify(...) y el encabezado 'Content-Type': 'application/json', que es lo que busca express.json(). En cambio, un cuerpo FormData envía campos de formulario, y esta API los rechaza. Las comprobaciones no pueden ejecutar el JavaScript de una página: verifican que la página se sirva, que envíe JSON y las llamadas que realiza a la API.

Desafío

Fácil

Sirve la carpeta public con express.static, para que / abra public/index.html.
Al enviar el formulario, se envía { "title" } a POST /api/tasks como JSON. Si la operación se realiza correctamente, borra el formulario y ejecuta load(); si se produce un error, muestra error.message en #message.

Abre / en la vista de página, añade una tarea y, después, añade otra vez el mismo título.

Pruébalo tú mismo

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