Latihan 2: Fetching Data — Vue

Latihan 2 dari materi Fetching Data di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Starter-nya sudah punya items, loading, error, template tiga keadaan, dan ambilData(): server palsu yang menjawab seperti fetch sesudah 0,05 detik, dengan ok: true dan json() yang memberi ["Data 1", "Data 2", "Data 3"]. Semuanya tetap. Ganti komentar TODO dengan:

onMounted(async () => { ... }).
Di dalamnya, try: const res = await ambilData(), lalu if (!res.ok) throw new Error("HTTP " + res.status), lalu items.value = await res.json().
catch (e): error.value = e.message.
finally: loading.value = false.

Yang dicek:

#data berisi tiga <li>, Data 1 paling atas dan Data 3 paling bawah.
Kodemu memanggil onMounted( dan await ambilData(, memeriksa res.ok, dan punya catch serta finally.
items tetap mulai dari ref([]): datanya datang dari res.json(), bukan nilai awal.

Hint

Request butuh waktu dan bisa gagal, jadi pekerjaannya ditaruh di try, kegagalannya di catch, dan mematikan loading di finally, yang selalu jalan.
Callback onMounted dibuat async supaya bisa await. Tunggu ambilData(), tolak response yang res.ok-nya false, lalu tunggu res.json() untuk mengisi items.value.
onMounted(async () => { try { const res = await ambilData(); if (!res.ok) throw new Error("HTTP " + res.status); items.value = await res.json() } catch (e) { error.value = e.message } finally { loading.value = false } })

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Fetching Data — Vue

Hint

Memperbarui Aplikasi