Menu
CoddyTech
Mulai belajar

Halaman yang Memanggil API

Termasuk bagian REST API dalam perjalanan Node.js di Coddy. Pelajaran 21 dari 25.

Sebuah halaman memanggil API-mu dengan fetch. POST memerlukan tiga opsi: method, headers, dan body. Ubah object JavaScript menjadi teks JSON untuk body, lalu tetapkan label application/json pada teks tersebut.

const response = await fetch('/api/books', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({title: title}),
});
const data = await response.json();

await pertama menerima respons HTTP. await kedua membaca body JSON-nya. response.ok memberi tahu apakah statusnya berada dalam rentang berhasil. Status seperti 400 atau 409 tidak menolak promise fetch; status itu menghasilkan respons yang nilai ok-nya false. Kode formulir dan list sudah disediakan; fokuslah pada pengiriman permintaan dan penanganan hasilnya.

Variabel message yang disediakan merujuk ke paragraf pesan pada halaman. Atur textContent-nya untuk menampilkan teks, atau atur ke string kosong untuk menghapusnya:

message.textContent = data.error.message;
// Kosongkan setelah berhasil:
message.textContent = '';

Halaman dan API menggunakan origin yang sama, jadi pemanggilan ini tidak memerlukan izin CORS. FormData mengenkode formulir dengan cara yang berbeda dari JSON; gunakan teks JSON karena API ini menggunakan express.json().

challenge icon

Tantangan

Mudah

API-mu belum memiliki layar. Buat halaman kecil untuk API-mu, yang disajikan oleh server yang sama, dengan formulir untuk menambahkan tugas melalui API.

  1. Di server.js, sajikan folder public dengan express.static, agar GET / mengembalikan public/index.html.
  2. Di public/index.html, listener submit sudah membaca judul. Buat agar listener mengirim tugas baru ke API:
    • Gunakan variabel title yang disediakan, yang berisi teks input.
    • Kirimkan dengan fetch('/api/tasks', ...) sebagai POST.
    • Body berupa teks JSON yang dibuat dengan JSON.stringify, seperti {"title":"Water the plants"}.
    • Permintaan memerlukan header 'Content-Type': 'application/json' di opsi headers pada fetch, atau express.json() tidak akan membaca body.
  3. Jika respons OK (properti ok-nya bernilai true untuk status apa pun dari 200 sampai 299), kosongkan formulir dengan form.reset(), kosongkan #message, lalu panggil load() agar list menampilkan tugas baru.
  4. Jika tidak, body respons memiliki bentuk error seperti yang dijelaskan sebelumnya, misalnya:
    { "error": { "code": "conflict", "message": "A task with this title already exists" } }
    Tampilkan message-nya di paragraf #message.

Pemeriksaan menjalankan skrip halaman yang disediakan ini dengan formulir simulasi sederhana dan API pelajaran yang sebenarnya. Pemeriksaan mengirimkan sebuah tugas dan tugas duplikat, lalu memeriksa list, formulir, dan pesan. Coba juga halaman sebenarnya di samping editor.

Coba: kirim GET /. Halaman terbuka di tampilan halaman dengan 3 tugas awal. Ketik "Water the plants" lalu tekan Add: input menjadi kosong dan tugas muncul di bagian bawah list. Ketik "Water the plants" lagi lalu tekan Add: list tetap sama, dan "A task with this title already exists" muncul di bawah formulir.

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 response = await fetch('/api/tasks?limit=50');
            const page = await response.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();
            const title = form.elements.title.value;
            // 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>

Semua pelajaran di REST API

1Sumber Daya dan Kata Kerja

Sumber Daya dan URLMembuat dengan POSTPelajaran proyekPembaruan Parsial dengan PATCHPelajaran proyekMenghapusPelajaran proyekMengganti dengan PUTPelajaran proyek

4Peramban, Versi, dan Konfigurasi

Apa Itu OriginMengizinkan Origin LainCORSHalaman yang Memanggil APIPelajaran proyekPengelolaan VersiPelajaran proyekKonfigurasiPelajaran proyek

2Validasi dan error

Memvalidasi inputPelajaran proyekMendeskripsikan bodyMenggunakan data yang diperiksaField opsionalMembaca error validasiSkema dengan zodSatu bentuk errorPelajaran proyekKonflikPelajaran proyek

5Proyek: Label

LabelPelajaran proyekTenggat WaktuPelajaran proyek

3List

Menyaring listPelajaran proyekMengurutkan TeksPelajaran proyekPengurutanPelajaran proyekPaginasiPelajaran proyek

Latihan sendiri: Playground Express