Fetch Simulasi: Belajar fetch, async/await, dan error jaringan

Cara bermain Fetch Simulasi

1. Baca instruksi level dan daftar rute di Server AntarMakan. Di sana tertulis status dan lama balasan tiap rute.
2. Tulis isi async function pesan(). fetch, setTimeout, dan setLoading sudah tersedia.
3. Timeline request diperbarui setiap kamu mengetik. Bar yang mulai di titik yang sama berarti request-nya berangkat bersamaan.
4. Tekan Cek jawaban atau Ctrl + Enter. Yang dicek adalah nilai return kodemu dan catatan request-nya: urutan, waktu, dan jumlah percobaan.
5. Kalau buntu, buka Petunjuk. Petunjuk pertama mengarahkan, petunjuk terakhir hampir menjawab.
6. Level yang sudah selesai tetap tercentang saat kamu kembali dengan browser yang sama.

Yang kamu pelajari

1. Level 1

   await fetch dan res.json()

   fetch memberi objek Response. Isinya dibaca terpisah dengan await res.json().

2. Level 2

   res.status

   Balasan 404 atau 500 tetap balasan. fetch tidak melempar error untuk status HTTP.

3. Level 3

   res.ok

   true hanya untuk status 200 sampai 299. Cek dulu sebelum memakai isinya.

4. Level 4

   try/catch untuk error jaringan

   Kalau request tidak sampai ke server, fetch gagal dengan TypeError.

5. Level 5

   Error HTTP vs error jaringan

   Lempar error sendiri saat !res.ok, lalu bedakan keduanya di catch.

6. Level 6

   Loading state dan finally

   finally selalu jalan, jadi spinner pasti mati baik request berhasil maupun gagal.

7. Level 7

   Promise.all

   Menjalankan beberapa request bersamaan. Total waktunya mengikuti request yang paling lama, bukan jumlahnya.

8. Level 8

   Promise.allSettled

   Menunggu semua request, termasuk yang gagal, lalu melaporkan status masing-masing.

9. Level 9

   Timeout dengan AbortController

   controller.abort() membatalkan request yang memakai signal-nya, dan fetch gagal dengan AbortError.

10. Level 10

    Retry dengan jeda

    Coba ulang request yang gagal sementara, dengan batas percobaan dan jeda di antaranya.

fetch tidak gagal karena 404

Promise dari fetch hanya reject kalau request tidak sampai ke server: koneksi putus, alamat tidak valid, atau dibatalkan. Balasan 404, 500, atau 503 tetap balasan yang sah, jadi Promise-nya resolve dan catch tidak jalan.

Karena itu pola yang aman adalah if (!res.ok) throw new Error(...) setelah await fetch(...). Dengan begitu satu catch menangkap dua jenis gagal, dan kamu bisa membedakannya lewat err instanceof TypeError.

Tanya jawab