Memahami REST API dan HTTP lewat Contoh Sederhana

Ketika aplikasi web menampilkan daftar tugas, data itu sering datang dari server. Browser mengirim request, server memprosesnya, lalu mengirim response. HTTP adalah aturan dasar pertukaran pesan tersebut.

Request punya tujuan

Sebuah request biasanya berisi method, URL, header, dan kadang body. Untuk membaca daftar tugas, klien dapat meminta:

GET /api/tasks HTTP/1.1
Accept: application/json

Server dapat membalas dengan status dan JSON:

HTTP/1.1 200 OK
Content-Type: application/json

[{"id":1,"title":"Belajar HTTP","done":false}]

GET dipakai untuk mengambil representasi data. Untuk membuat tugas baru, gunakan POST dengan body:

POST /api/tasks HTTP/1.1
Content-Type: application/json

{"title":"Belajar API"}

Jika berhasil membuat sumber baru, server dapat mengembalikan status 201 Created beserta data atau lokasi sumber tersebut.

Kenali status code dasar

Kode	Arti praktis
200	Request berhasil dan ada response.
201	Sumber baru berhasil dibuat.
400	Input request tidak sesuai aturan API.
401	Autentikasi diperlukan atau tidak valid.
404	Sumber yang diminta tidak ditemukan.
500	Server gagal memproses request.

Jangan hanya memeriksa apakah koneksi berhasil. Status 404 dan 500 tetap merupakan response HTTP, tetapi menandakan hasil yang perlu ditangani.

Panggil API dari JavaScript

async function muatTugas() {
  const response = await fetch("/api/tasks");
  if (!response.ok) {
    throw new Error(`Gagal mengambil tugas: ${response.status}`);
  }
  return response.json();
}

fetch tidak otomatis melempar error untuk status HTTP 4xx atau 5xx. Itulah sebabnya response.ok perlu diperiksa. Tambahkan penanganan error di UI agar pengguna tahu ketika data gagal dimuat.

REST itu pola desain

Dalam API bergaya REST, URL mewakili sumber seperti /api/tasks atau /api/tasks/1, sedangkan method menjelaskan tindakan terhadap sumber itu. Ini membantu API tetap mudah ditebak. Tetap dokumentasikan bentuk JSON, aturan validasi, dan kemungkinan error; nama endpoint saja tidak cukup.

Sebagai latihan, rancang endpoint untuk daftar catatan: URL apa yang dipakai untuk membaca semua catatan, membuat catatan, dan membaca satu catatan? Setelah itu, coba implementasikan dengan bahasa backend yang kamu pelajari.