Страница, вызывающая API

Часть раздела REST API путешествия по Node.js на Coddy. Урок 14 из 18.

У вашего API пока нет экрана. Страница, которую обслуживает тот же сервер, может вызывать его с помощью fetch, и CORS не нужен, поскольку источник тот же. express.static('public') обслуживает public/index.html по адресу /.

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

res.ok имеет значение true для любого статуса от 200 до 299. Тело передаётся в параметре body, а для JSON нужны две вещи: текст из JSON.stringify(...) и заголовок 'Content-Type': 'application/json', который проверяет express.json(). Тело FormData вместо этого отправляет поля формы, но этот API их не принимает. Проверки не могут запускать JavaScript страницы: они проверяют, что страница обслуживается, отправляет JSON и выполняет вызовы API.

Задание

Легко

Обслуживайте папку public с помощью express.static, чтобы при открытии / открывался public/index.html.
При отправке формы отправляется { "title" } на POST /api/tasks в формате JSON. В случае успеха очистите форму и вызовите load(); при ошибке покажите error.message в #message.

Откройте / в режиме просмотра страницы, добавьте задачу, а затем добавьте задачу с тем же названием.

Попробуйте сами

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