Halaman yang Memanggil API

Termasuk bagian REST API dalam perjalanan Node.js di Coddy. Pelajaran 14 dari 18.

API-mu belum memiliki layar. Halaman yang disajikan oleh server yang sama dapat memanggil API dengan fetch, tanpa memerlukan CORS, karena origin-nya sama. express.static('public') menyajikan public/index.html di /.

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

res.ok bernilai true untuk status apa pun dari 200 hingga 299. Isi dikirim melalui opsi body, dan JSON memerlukan dua hal: teks dari JSON.stringify(...) serta header 'Content-Type': 'application/json', yang dicari oleh express.json(). Isi FormData mengirim kolom formulir, tetapi API ini menolaknya. Pemeriksaan tidak dapat menjalankan JavaScript halaman: pemeriksaan memastikan halaman disajikan, halaman mengirim JSON, dan API dipanggil oleh halaman tersebut.

Tantangan

Mudah

Sajikan folder public dengan express.static, agar / membuka public/index.html.
Submit formulir mengirim { "title" } ke POST /api/tasks sebagai JSON. Jika berhasil, kosongkan formulir dan jalankan load(); jika terjadi error, tampilkan error.message di #message.

Buka / di tampilan halaman, tambahkan sebuah tugas, lalu tambahkan lagi tugas dengan judul yang sama.

Coba sendiri

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