Menghubungkan Frontend ke Backend dengan Fetch API

Halo, Gabuters!

Pada artikel sebelumnya, kita berhasil membuat REST API CRUD menggunakan JavaScript tanpa framework.

API tersebut sudah mendukung GET, POST, PUT, dan DELETE. Kita juga belajar membaca request body, memvalidasi data, dan mengirim response JSON.

Namun, selama ini kita menguji API menggunakan browser dan curl.

Bagaimana jika kita ingin menampilkan daftar artikel langsung di halaman HTML?

Bagaimana jika pengunjung bisa menambahkan artikel melalui formulir?

Dan bagaimana cara menampilkan pesan ketika server sedang bermasalah?

Untuk menjawabnya, kita akan belajar Fetch API, yaitu antarmuka JavaScript yang dapat digunakan untuk melakukan HTTP request dari browser.

Pada akhir artikel, kita akan membuat halaman sederhana yang dapat:

Mengambil daftar artikel dari backend.
Menampilkan data artikel.
Menambahkan artikel melalui formulir.
Menampilkan indikator loading.
Menangani error jaringan dan respons HTTP.
Memperbarui tampilan tanpa memuat ulang seluruh halaman.

Kita tetap menggunakan JavaScript murni, tanpa framework frontend maupun backend.

1. Mengapa Frontend Perlu Berkomunikasi dengan Backend?#

Bayangkan kita mempunyai halaman daftar artikel.

Jika seluruh artikel ditulis langsung dalam HTML, setiap perubahan data mungkin mengharuskan kita mengubah kode halaman.

Namun, jika artikel disediakan melalui API, frontend dapat meminta data terbaru dari backend.

Alurnya seperti ini:

1
Pengguna membuka halaman
2
          |
3
          v
4
JavaScript menjalankan fetch()
5
          |
6
          | HTTP GET
7
          v
8
Backend API
9
          |
10
          | Response JSON
11
          v
12
JavaScript membaca response
13
          |
14
          v
15
Halaman menampilkan artikel

Dengan cara ini, frontend bertanggung jawab menampilkan data, sedangkan backend bertanggung jawab menyediakan dan memprosesnya.

Pemisahan tersebut memudahkan kita memahami peran masing-masing komponen.

2. Apa Itu Fetch API?#

Fetch API adalah antarmuka yang disediakan lingkungan seperti browser untuk melakukan request dan menerima response.

Di browser modern, kita dapat menggunakannya melalui function fetch().

Contoh sederhana:

1
fetch("/api/artikel");

Kode tersebut mengirim request ke endpoint /api/artikel pada origin yang sama dengan halaman.

Namun, fetch() tidak langsung menghasilkan data artikel.

Function tersebut mengembalikan Promise.

Promise merepresentasikan hasil operasi asynchronous yang mungkin tersedia kemudian.

Karena komunikasi jaringan membutuhkan waktu, JavaScript tidak harus menghentikan seluruh interaksi halaman sambil menunggu respons.

3. Mengenal Promise#

Sebelum menggunakan Fetch API lebih jauh, kita perlu memahami Promise.

Promise mempunyai tiga keadaan utama:

pending: operasi masih berlangsung.
fulfilled: operasi berhasil diselesaikan.
rejected: operasi gagal.

Contohnya:

1
const janji = new Promise((resolve) => {
2
  setTimeout(() => {
3
    resolve("Data berhasil diperoleh.");
4
  }, 1000);
5
});
6

7
janji.then((hasil) => {
8
  console.log(hasil);
9
});

Setelah sekitar satu detik, console menampilkan:

1
Data berhasil diperoleh.

Pada contoh tersebut, resolve() menyelesaikan Promise dengan hasil tertentu.

Kita juga dapat menangani penolakan Promise menggunakan .catch().

Contohnya:

1
const janji = Promise.reject(
2
  new Error("Terjadi kesalahan.")
3
);
4

5
janji
6
  .then((hasil) => {
7
    console.log(hasil);
8
  })
9
  .catch((error) => {
10
    console.error(error.message);
11
  });

Hasilnya:

1
Terjadi kesalahan.

Promise sangat sering digunakan ketika bekerja dengan API.

4. Menggunakan fetch() dengan then()#

Sekarang kita coba mengambil data artikel.

Misalnya, backend menyediakan:

1
GET http://localhost:3000/api/artikel

Kita bisa menulis:

1
fetch("http://localhost:3000/api/artikel")
2
  .then((response) => {
3
    return response.json();
4
  })
5
  .then((data) => {
6
    console.log(data);
7
  })
8
  .catch((error) => {
9
    console.error("Gagal mengambil data:", error);
10
  });

Mari kita pahami alurnya.

Pertama, fetch() mengirim HTTP request.

Kemudian .then() menerima objek Response ketika Promise dari fetch() berhasil diselesaikan.

Method:

1
response.json()

Membaca body response dan menguraikannya sebagai JSON secara asynchronous.

Karena response.json() juga mengembalikan Promise, kita menggunakan .then() berikutnya untuk mendapatkan hasilnya.

Jika terjadi kegagalan jaringan atau proses Promise ditolak, .catch() dapat menangani error tersebut.

Namun, ada satu hal penting.

Fetch tidak otomatis menolak Promise hanya karena server mengembalikan status HTTP 404 atau 500.

Kita perlu memeriksa status respons sendiri.

5. Memeriksa response.ok#

Objek Response mempunyai properti:

1
response.ok

Nilainya true ketika status HTTP berada dalam rentang 200 sampai 299.

Contohnya:

1
fetch("http://localhost:3000/api/artikel")
2
  .then((response) => {
3
    if (!response.ok) {
4
      throw new Error(
5
        `Request gagal dengan status ${response.status}`
6
      );
7
    }
8

9
    return response.json();
10
  })
11
  .then((data) => {
12
    console.log(data);
13
  })
14
  .catch((error) => {
15
    console.error(error.message);
16
  });

Dengan pemeriksaan tersebut, respons seperti 404 atau 500 akan diperlakukan sebagai error oleh alur kode kita.

Ini penting karena kegagalan HTTP dan kegagalan jaringan merupakan dua kondisi yang berbeda.

6. Mengenal async dan await#

Penulisan Promise menggunakan .then() valid dan sering digunakan.

Namun, ketika alurnya semakin panjang, sebagian pengembang lebih nyaman menggunakan async/await.

Kata kunci async digunakan untuk mendeklarasikan function asynchronous.

Kata kunci await digunakan untuk menunggu penyelesaian Promise di dalam konteks yang mendukungnya.

Contohnya:

1
async function ambilArtikel() {
2
  const response = await fetch(
3
    "http://localhost:3000/api/artikel"
4
  );
5

6
  if (!response.ok) {
7
    throw new Error(
8
      `Request gagal dengan status ${response.status}`
9
    );
10
  }
11

12
  const data = await response.json();
13

14
  console.log(data);
15
}
16

17
ambilArtikel().catch((error) => {
18
  console.error(error.message);
19
});

Alurnya terlihat lebih menyerupai kode berurutan.

Namun, operasi tersebut tetap asynchronous.

await tidak berarti seluruh browser berhenti bekerja sampai request selesai.

7. Menangani Error dengan try…catch#

Ketika menggunakan async/await, kita sering memakai try...catch.

Contohnya:

1
async function ambilArtikel() {
2
  try {
3
    const response = await fetch(
4
      "http://localhost:3000/api/artikel"
5
    );
6

7
    if (!response.ok) {
8
      throw new Error(
9
        `HTTP ${response.status}`
10
      );
11
    }
12

13
    const data = await response.json();
14

15
    console.log(data);
16
  } catch (error) {
17
    console.error(
18
      "Gagal mengambil artikel:",
19
      error.message
20
    );
21
  }
22
}
23

24
ambilArtikel();

Blok try berisi operasi yang mungkin menghasilkan error.

Blok catch menangani error tersebut.

Error dapat berasal dari:

Kegagalan jaringan.
Request yang dibatalkan.
Respons HTTP yang kita perlakukan sebagai error.
Body response yang tidak valid sebagai JSON.
Kesalahan lain ketika memproses data.

Dalam aplikasi nyata, pesan yang ditampilkan kepada pengguna sebaiknya mudah dipahami dan tidak membocorkan detail internal server.

8. Mengenal Same-Origin Policy dan CORS#

Sebelum membuat halaman frontend, ada konsep penting yang perlu dipahami: origin.

Origin terdiri dari skema, hostname, dan port.

Contohnya:

1
http://localhost:3000

Dan:

1
http://localhost:5500

Merupakan origin berbeda karena port-nya berbeda.

Begitu juga:

1
http://localhost:3000

Dan:

1
http://127.0.0.1:3000

Merupakan origin berbeda karena hostname-nya berbeda.

Browser menerapkan kebijakan keamanan yang disebut same-origin policy.

Untuk request lintas origin, mekanisme CORS (Cross-Origin Resource Sharing) memungkinkan server menyatakan origin mana yang diizinkan membaca respons melalui JavaScript browser.

Misalnya, frontend berjalan pada:

1
http://localhost:5500

Sedangkan backend berjalan pada:

1
http://localhost:3000

Jika server tidak mengizinkan origin frontend melalui CORS, browser dapat memblokir akses JavaScript terhadap respons.

CORS merupakan mekanisme yang diterapkan browser.

CORS bukan pengganti autentikasi, otorisasi, atau validasi data.

Karena itu, jangan menganggap API aman hanya karena CORS sudah dikonfigurasi.

9. Cara Menghindari Masalah CORS Saat Belajar#

Untuk latihan awal, kita akan menggunakan pendekatan yang lebih sederhana.

Frontend dan API dijalankan melalui satu HTTP server yang sama.

Dengan begitu, halaman HTML dan endpoint API menggunakan origin yang sama.

Struktur proyek latihan kita:

1
belajar-fetch-api/
2
├── server.js
3
└── public/
4
    ├── index.html
5
    ├── style.css
6
    └── script.js

Node.js akan melayani halaman HTML, CSS, dan JavaScript sekaligus menyediakan endpoint API.

Kita tidak membutuhkan server frontend terpisah.

Keuntungannya:

Tidak perlu mengonfigurasi CORS untuk latihan ini.
Tidak perlu memasang framework.
Semua request menggunakan satu origin.
Lebih mudah memahami komunikasi frontend dan backend.

10. Menyiapkan Proyek#

Buat folder:

1
belajar-fetch-api/

Di dalamnya, buat file dan folder sesuai struktur sebelumnya.

Pastikan Node.js sudah tersedia:

1
node --version

Untuk latihan ini, kita akan menggunakan modul bawaan:

1
require("node:http");
2
require("node:fs/promises");
3
require("node:path");

Modul tersebut sudah tersedia pada Node.js.

Kita tidak perlu menjalankan npm install.

11. Membuat Backend API dan Server Frontend#

Buka file server.js.

Masukkan kode lengkap berikut:

1
const http = require("node:http");
2
const fs = require("node:fs/promises");
3
const path = require("node:path");
4

5
const HOST = "127.0.0.1";
6
const PORT = 3000;
7
const BATAS_BODY = 10 * 1024;
8

9
const folderPublic = path.join(__dirname, "public");
10

11
let artikel = [
12
  { id: 1, judul: "Belajar HTML", kategori: "HTML" },
13
  { id: 2, judul: "Belajar CSS", kategori: "CSS" },
14
  { id: 3, judul: "Belajar JavaScript", kategori: "JavaScript" }
15
];
16

17
let idBerikutnya = 4;
18

19
function kirimJSON(res, statusCode, data) {
20
  res.writeHead(statusCode, {
21
    "Content-Type": "application/json; charset=utf-8"
22
  });
23

24
  res.end(JSON.stringify(data));
25
}
26

27
function buatError(statusCode, pesan) {
28
  const error = new Error(pesan);
29
  error.statusCode = statusCode;
30
  return error;
31
}
32

33
async function bacaJSON(req) {
34
  const tipeKonten = req.headers["content-type"] || "";
35

36
  if (!/^application\/json(?:\s*;|$)/i.test(tipeKonten)) {
37
    throw buatError(
38
      415,
39
      "Gunakan Content-Type: application/json."
40
    );
41
  }
42

43
  const chunks = [];
44
  let totalUkuran = 0;
45
  let terlaluBesar = false;
46

47
  for await (const chunk of req) {
48
    totalUkuran += chunk.length;
49

50
    if (totalUkuran > BATAS_BODY) {
51
      terlaluBesar = true;
52
    }
53

54
    if (!terlaluBesar) {
55
      chunks.push(chunk);
56
    }
57
  }
58

59
  if (terlaluBesar) {
60
    throw buatError(413, "Ukuran request terlalu besar.");
61
  }
62

63
  const body = Buffer.concat(chunks).toString("utf8");
64

65
  try {
66
    return JSON.parse(body);
67
  } catch {
68
    throw buatError(400, "Format JSON tidak valid.");
69
  }
70
}
71

72
function validasiArtikel(data) {
73
  return (
74
    data !== null &&
75
    typeof data === "object" &&
76
    !Array.isArray(data) &&
77
    typeof data.judul === "string" &&
78
    data.judul.trim().length > 0 &&
79
    data.judul.trim().length <= 150 &&
80
    typeof data.kategori === "string" &&
81
    data.kategori.trim().length > 0 &&
82
    data.kategori.trim().length <= 50
83
  );
84
}
85

86
async function kirimFile(res, namaFile, contentType) {
87
  const lokasi = path.join(folderPublic, namaFile);
88
  const isi = await fs.readFile(lokasi);
89

90
  res.writeHead(200, {
91
    "Content-Type": contentType
92
  });
93

94
  res.end(isi);
95
}
96

97
async function tanganiRequest(req, res) {
98
  const url = new URL(req.url, "http://localhost");
99
  const pathname = url.pathname;
100
  const method = req.method;
101

102
  if (method === "GET" && pathname === "/") {
103
    await kirimFile(
104
      res,
105
      "index.html",
106
      "text/html; charset=utf-8"
107
    );
108
    return;
109
  }
110

111
  if (method === "GET" && pathname === "/style.css") {
112
    await kirimFile(
113
      res,
114
      "style.css",
115
      "text/css; charset=utf-8"
116
    );
117
    return;
118
  }
119

120
  if (method === "GET" && pathname === "/script.js") {
121
    await kirimFile(
122
      res,
123
      "script.js",
124
      "text/javascript; charset=utf-8"
125
    );
126
    return;
127
  }
128

129
  if (method === "GET" && pathname === "/api/artikel") {
130
    kirimJSON(res, 200, artikel);
131
    return;
132
  }
133

134
  if (method === "POST" && pathname === "/api/artikel") {
135
    const data = await bacaJSON(req);
136

137
    if (!validasiArtikel(data)) {
138
      kirimJSON(res, 400, {
139
        pesan:
140
          "Judul wajib diisi (maksimal 150 karakter) dan kategori wajib diisi (maksimal 50 karakter)."
141
      });
142
      return;
143
    }
144

145
    const artikelBaru = {
146
      id: idBerikutnya++,
147
      judul: data.judul.trim(),
148
      kategori: data.kategori.trim()
149
    };
150

151
    artikel.push(artikelBaru);
152

153
    res.setHeader(
154
      "Location",
155
      `/api/artikel/${artikelBaru.id}`
156
    );
157

158
    kirimJSON(res, 201, artikelBaru);
159
    return;
160
  }
161

162
  if (pathname === "/api/artikel") {
163
    res.setHeader("Allow", "GET, POST");
164

165
    kirimJSON(res, 405, {
166
      pesan: "Method tidak diizinkan."
167
    });
168
    return;
169
  }
170

171
  kirimJSON(res, 404, {
172
    pesan: "Halaman atau endpoint tidak ditemukan."
173
  });
174
}
175

176
const server = http.createServer((req, res) => {
177
  tanganiRequest(req, res).catch((error) => {
178
    console.error("Server error:", error.message);
179

180
    if (res.headersSent) {
181
      res.destroy();
182
      return;
183
    }
184

185
    const statusCode =
186
      Number.isInteger(error.statusCode) &&
187
      error.statusCode >= 400 &&
188
      error.statusCode < 500
189
        ? error.statusCode
190
        : 500;
191

192
    kirimJSON(res, statusCode, {
193
      pesan:
194
        statusCode === 500
195
          ? "Terjadi kesalahan pada server."
196
          : error.message
197
    });
198
  });
199
});
200

201
server.on("error", (error) => {
202
  console.error("Gagal menjalankan server:", error.message);
203
});
204

205
server.listen(PORT, HOST, () => {
206
  console.log(`Buka http://localhost:${PORT}`);
207
});

Server tersebut memiliki dua tanggung jawab.

Pertama, melayani file frontend:

1
GET /
2
GET /style.css
3
GET /script.js

Kedua, menyediakan endpoint API:

1
GET /api/artikel
2
POST /api/artikel

Untuk latihan ini, kita sengaja hanya menggunakan operasi membaca dan menambahkan artikel.

Operasi PUT dan DELETE sudah kita pelajari pada artikel sebelumnya.

Catatan keamanan#

File yang dilayani server ditentukan melalui daftar route yang eksplisit.

Kita tidak menerima nama file sembarang dari URL untuk langsung dibaca dari sistem.

Pendekatan ini menghindari kebutuhan menangani path traversal pada contoh sederhana.

Namun, server ini tetap hanya ditujukan untuk pembelajaran lokal.

Belum ada autentikasi, penyimpanan permanen, atau perlindungan produksi yang lengkap.

12. Membuat Struktur HTML#

Sekarang buka public/index.html.

Masukkan kode berikut:

1
<!DOCTYPE html>
2
<html lang="id">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta
6
    name="viewport"
7
    content="width=device-width, initial-scale=1.0"
8
  >
9
  <title>Daftar Artikel - BapakGabut</title>
10
  <link rel="stylesheet" href="/style.css">
11
  <script src="/script.js" defer></script>
12
</head>
13
<body>
14
  <main class="container">
15
    <header>
16
      <h1>Daftar Artikel BapakGabut</h1>
17
      <p>
18
        Belajar menghubungkan frontend dan backend
19
        menggunakan Fetch API.
20
      </p>
21
    </header>
22

23
    <section aria-labelledby="judul-daftar">
24
      <div class="judul-bagian">
25
        <h2 id="judul-daftar">Artikel Tersedia</h2>
26
        <button id="tombol-refresh" type="button">
27
          Muat Ulang
28
        </button>
29
      </div>
30

31
      <p id="status-daftar" role="status" aria-live="polite"></p>
32

33
      <ul id="daftar-artikel" class="daftar-artikel"></ul>
34
    </section>
35

36
    <section aria-labelledby="judul-form">
37
      <h2 id="judul-form">Tambah Artikel</h2>
38

39
      <form id="form-artikel">
40
        <label for="judul">Judul Artikel</label>
41
        <input
42
          id="judul"
43
          name="judul"
44
          type="text"
45
          maxlength="150"
46
          required
47
        >
48

49
        <label for="kategori">Kategori</label>
50
        <input
51
          id="kategori"
52
          name="kategori"
53
          type="text"
54
          maxlength="50"
55
          required
56
        >
57

58
        <button id="tombol-simpan" type="submit">
59
          Simpan Artikel
60
        </button>
61
      </form>
62

63
      <p id="status-form" role="status" aria-live="polite"></p>
64
    </section>
65
  </main>
66
</body>
67
</html>

Struktur HTML tersebut mempunyai beberapa elemen penting.

Daftar artikel#

Elemen:

1
<ul id="daftar-artikel"></ul>

Akan diisi menggunakan JavaScript setelah data diterima dari API.

Status daftar#

Elemen:

1
<p id="status-daftar" role="status" aria-live="polite"></p>

Digunakan untuk menampilkan pesan loading, error, atau informasi lainnya.

Formulir#

Formulir mempunyai dua input:

Judul artikel.
Kategori.

Ketika formulir dikirim, JavaScript akan mencegah submit HTML biasa dan mengirim request melalui Fetch API.

13. Menambahkan CSS Sederhana#

Sekarang buka public/style.css.

Masukkan kode berikut:

1
* {
2
  box-sizing: border-box;
3
}
4

5
body {
6
  margin: 0;
7
  font-family: Arial, sans-serif;
8
  line-height: 1.6;
9
  background: #f3f4f6;
10
  color: #111827;
11
}
12

13
.container {
14
  width: min(100% - 32px, 760px);
15
  margin: 40px auto;
16
}
17

18
header,
19
section {
20
  background: white;
21
  padding: 24px;
22
  border-radius: 12px;
23
  margin-bottom: 20px;
24
}
25

26
h1,
27
h2 {
28
  margin-top: 0;
29
}
30

31
.judul-bagian {
32
  display: flex;
33
  justify-content: space-between;
34
  align-items: center;
35
  gap: 12px;
36
  flex-wrap: wrap;
37
}
38

39
.daftar-artikel {
40
  list-style: none;
41
  padding: 0;
42
}
43

44
.daftar-artikel li {
45
  padding: 12px;
46
  border: 1px solid #d1d5db;
47
  border-radius: 8px;
48
  margin-bottom: 10px;
49
}
50

51
.daftar-artikel strong {
52
  display: block;
53
}
54

55
label {
56
  display: block;
57
  margin: 14px 0 6px;
58
  font-weight: bold;
59
}
60

61
input {
62
  display: block;
63
  width: 100%;
64
  padding: 10px;
65
  border: 1px solid #9ca3af;
66
  border-radius: 6px;
67
  font: inherit;
68
}
69

70
button {
71
  padding: 10px 16px;
72
  border: none;
73
  border-radius: 6px;
74
  background: #2563eb;
75
  color: white;
76
  cursor: pointer;
77
  font: inherit;
78
}
79

80
button:disabled {
81
  opacity: 0.6;
82
  cursor: not-allowed;
83
}
84

85
button:focus-visible,
86
input:focus-visible {
87
  outline: 3px solid #f59e0b;
88
  outline-offset: 2px;
89
}
90

91
#status-daftar,
92
#status-form {
93
  min-height: 24px;
94
}
95

96
@media (max-width: 480px) {
97
  .container {
98
    margin: 16px auto;
99
  }
100

101
  header,
102
  section {
103
    padding: 16px;
104
  }
105
}

CSS tersebut hanya digunakan untuk membuat halaman lebih nyaman dibaca.

Fokus utama artikel ini tetap pada komunikasi frontend dan backend.

14. Mengambil Data Menggunakan Fetch API#

Sekarang kita mulai menulis JavaScript browser.

Buka public/script.js.

Pertama, ambil elemen HTML yang diperlukan.

1
const daftarArtikel = document.querySelector(
2
  "#daftar-artikel"
3
);
4

5
const statusDaftar = document.querySelector(
6
  "#status-daftar"
7
);
8

9
const tombolRefresh = document.querySelector(
10
  "#tombol-refresh"
11
);

Kemudian buat function untuk mengambil data.

1
async function ambilArtikel() {
2
  statusDaftar.textContent = "Memuat artikel...";
3

4
  try {
5
    const response = await fetch("/api/artikel");
6

7
    if (!response.ok) {
8
      throw new Error(
9
        `Gagal mengambil artikel. HTTP ${response.status}`
10
      );
11
    }
12

13
    const data = await response.json();
14

15
    console.log(data);
16
    statusDaftar.textContent = "Artikel berhasil dimuat.";
17
  } catch (error) {
18
    statusDaftar.textContent =
19
      "Gagal memuat artikel. Silakan coba lagi.";
20

21
    console.error(error);
22
  }
23
}

Perhatikan URL:

1
fetch("/api/artikel");

Kita tidak perlu menuliskan hostname dan port.

Karena frontend dan backend berjalan pada origin yang sama, browser menggunakan origin halaman saat ini.

Jika halaman dibuka melalui:

1
http://localhost:3000

Maka request menuju:

1
http://localhost:3000/api/artikel

15. Menampilkan Data ke HTML#

Mengambil data saja belum cukup.

Kita ingin menampilkannya di halaman.

Buat function:

1
function tampilkanArtikel(data) {
2
  daftarArtikel.replaceChildren();
3

4
  for (const item of data) {
5
    const li = document.createElement("li");
6

7
    const judul = document.createElement("strong");
8
    judul.textContent = item.judul;
9

10
    const kategori = document.createElement("span");
11
    kategori.textContent = `Kategori: ${item.kategori}`;
12

13
    li.append(judul, kategori);
14
    daftarArtikel.append(li);
15
  }
16
}

Function tersebut:

Mengosongkan daftar artikel sebelumnya.
Membuat elemen <li> untuk setiap artikel.
Membuat elemen judul dan kategori.
Menambahkan elemen ke halaman.

Mengapa menggunakan textContent?#

Karena data artikel berasal dari API.

Walaupun backend kita sederhana, data dari sumber eksternal tetap harus diperlakukan dengan hati-hati.

Penggunaan:

1
judul.textContent = item.judul;

Menampilkan nilai sebagai teks.

Ini lebih aman untuk teks biasa daripada memasukkan data yang belum dipercaya langsung ke innerHTML.

16. Menambahkan Loading State#

Ketika request sedang berlangsung, pengguna perlu mengetahui bahwa aplikasi sedang bekerja.

Kita dapat menonaktifkan tombol refresh sementara.

Contohnya:

1
tombolRefresh.disabled = true;

Kemudian mengaktifkannya kembali setelah request selesai.

Untuk memastikan proses pemulihan berjalan baik, gunakan finally.

Contohnya:

1
async function ambilArtikel() {
2
  tombolRefresh.disabled = true;
3
  statusDaftar.textContent = "Memuat artikel...";
4

5
  try {
6
    const response = await fetch("/api/artikel");
7

8
    if (!response.ok) {
9
      throw new Error(
10
        `HTTP ${response.status}`
11
      );
12
    }
13

14
    const data = await response.json();
15

16
    tampilkanArtikel(data);
17

18
    statusDaftar.textContent =
19
      `${data.length} artikel berhasil dimuat.`;
20
  } catch (error) {
21
    statusDaftar.textContent =
22
      "Gagal memuat artikel. Silakan coba lagi.";
23

24
    console.error(error);
25
  } finally {
26
    tombolRefresh.disabled = false;
27
  }
28
}

Blok finally dijalankan setelah try atau catch selesai, sehingga cocok untuk memulihkan kondisi tombol.

17. Mengirim Data Menggunakan POST#

Sekarang kita ingin menambahkan artikel baru melalui formulir.

Untuk mengirim data JSON menggunakan Fetch API, kita dapat menulis:

1
const response = await fetch("/api/artikel", {
2
  method: "POST",
3
  headers: {
4
    "Content-Type": "application/json"
5
  },
6
  body: JSON.stringify({
7
    judul: "Belajar Fetch API",
8
    kategori: "JavaScript"
9
  })
10
});

Mari kita pahami.

method#

Bagian:

1
method: "POST"

Menentukan HTTP method yang digunakan.

headers#

Bagian:

1
headers: {
2
  "Content-Type": "application/json"
3
}

Memberi tahu server bahwa body dikirim dalam format JSON.

body#

Bagian:

1
body: JSON.stringify(data)

Mengubah object JavaScript menjadi string JSON sebelum dikirim.

Server kemudian membaca body tersebut menggunakan function bacaJSON() yang sudah kita buat.

18. Membaca Pesan Error dari Backend#

Backend kita mengembalikan pesan JSON ketika request gagal.

Contohnya:

1
{
2
  "pesan": "Judul dan kategori wajib diisi."
3
}

Kita bisa membaca pesan tersebut agar frontend dapat menampilkan informasi yang lebih berguna.

Contoh:

1
const response = await fetch("/api/artikel", {
2
  method: "POST",
3
  headers: {
4
    "Content-Type": "application/json"
5
  },
6
  body: JSON.stringify(data)
7
});
8

9
const hasil = await response.json();
10

11
if (!response.ok) {
12
  throw new Error(
13
    hasil.pesan || `HTTP ${response.status}`
14
  );
15
}

Pada contoh ini, kita membaca body JSON terlebih dahulu.

Kemudian kita memeriksa apakah status HTTP menunjukkan keberhasilan.

Jika tidak, kita menggunakan pesan dari backend.

Untuk aplikasi produksi, pesan dari backend sebaiknya dirancang agar aman ditampilkan kepada pengguna.

Jangan menampilkan stack trace atau detail internal server secara langsung.

19. Membuat JavaScript Frontend Lengkap#

Sekarang kita gabungkan seluruh kode frontend.

Ganti isi public/script.js dengan:

1
const daftarArtikel = document.querySelector(
2
  "#daftar-artikel"
3
);
4

5
const statusDaftar = document.querySelector(
6
  "#status-daftar"
7
);
8

9
const tombolRefresh = document.querySelector(
10
  "#tombol-refresh"
11
);
12

13
const formArtikel = document.querySelector(
14
  "#form-artikel"
15
);
16

17
const tombolSimpan = document.querySelector(
18
  "#tombol-simpan"
19
);
20

21
const statusForm = document.querySelector(
22
  "#status-form"
23
);
24

25
function tampilkanArtikel(data) {
26
  daftarArtikel.replaceChildren();
27

28
  for (const item of data) {
29
    const li = document.createElement("li");
30

31
    const judul = document.createElement("strong");
32
    judul.textContent = item.judul;
33

34
    const kategori = document.createElement("span");
35
    kategori.textContent = `Kategori: ${item.kategori}`;
36

37
    li.append(judul, kategori);
38
    daftarArtikel.append(li);
39
  }
40
}
41

42
async function ambilArtikel() {
43
  tombolRefresh.disabled = true;
44
  statusDaftar.textContent = "Memuat artikel...";
45

46
  try {
47
    const response = await fetch("/api/artikel");
48

49
    if (!response.ok) {
50
      throw new Error(
51
        `Gagal mengambil artikel. HTTP ${response.status}`
52
      );
53
    }
54

55
    const data = await response.json();
56

57
    if (!Array.isArray(data)) {
58
      throw new Error("Format data artikel tidak sesuai.");
59
    }
60

61
    tampilkanArtikel(data);
62

63
    statusDaftar.textContent =
64
      `${data.length} artikel berhasil dimuat.`;
65
  } catch (error) {
66
    statusDaftar.textContent =
67
      "Gagal memuat artikel. Silakan coba lagi.";
68

69
    console.error(error);
70
  } finally {
71
    tombolRefresh.disabled = false;
72
  }
73
}
74

75
async function simpanArtikel(event) {
76
  event.preventDefault();
77

78
  const judul = document.querySelector("#judul").value.trim();
79
  const kategori = document.querySelector(
80
    "#kategori"
81
  ).value.trim();
82

83
  if (!judul || !kategori) {
84
    statusForm.textContent =
85
      "Judul dan kategori wajib diisi.";
86
    return;
87
  }
88

89
  tombolSimpan.disabled = true;
90
  statusForm.textContent = "Menyimpan artikel...";
91

92
  try {
93
    const response = await fetch("/api/artikel", {
94
      method: "POST",
95
      headers: {
96
        "Content-Type": "application/json"
97
      },
98
      body: JSON.stringify({
99
        judul,
100
        kategori
101
      })
102
    });
103

104
    const hasil = await response.json();
105

106
    if (!response.ok) {
107
      throw new Error(
108
        hasil.pesan || `HTTP ${response.status}`
109
      );
110
    }
111

112
    statusForm.textContent =
113
      `Artikel "${hasil.judul}" berhasil ditambahkan.`;
114

115
    formArtikel.reset();
116

117
    await ambilArtikel();
118
  } catch (error) {
119
    statusForm.textContent =
120
      `Gagal menyimpan artikel: ${error.message}`;
121

122
    console.error(error);
123
  } finally {
124
    tombolSimpan.disabled = false;
125
  }
126
}
127

128
tombolRefresh.addEventListener("click", ambilArtikel);
129

130
formArtikel.addEventListener("submit", simpanArtikel);
131

132
ambilArtikel();

Sekarang halaman kita sudah bisa berkomunikasi dengan backend.

Ketika halaman dibuka, JavaScript otomatis mengambil daftar artikel.

Ketika tombol Muat Ulang ditekan, frontend mengirim request GET lagi.

Ketika formulir dikirim, frontend mengirim request POST.

Jika penyimpanan berhasil, daftar artikel diperbarui tanpa memuat ulang seluruh halaman.

20. Menjalankan Aplikasi#

Pastikan struktur folder sesuai:

1
belajar-fetch-api/
2
├── server.js
3
└── public/
4
    ├── index.html
5
    ├── style.css
6
    └── script.js

Buka terminal pada folder belajar-fetch-api.

Jalankan:

1
node server.js

Jika berhasil, terminal menampilkan:

1
Buka http://localhost:3000

Kemudian buka browser:

1
http://localhost:3000

Halaman akan menampilkan daftar artikel awal.

Coba isi formulir:

1
Judul Artikel: Belajar Fetch API
2
Kategori: JavaScript

Kemudian tekan tombol Simpan Artikel.

Jika berhasil:

Frontend mengirim request POST.
Backend memvalidasi data.
Backend menambahkan artikel ke array.
Backend mengembalikan status 201.
Frontend menampilkan pesan keberhasilan.
Frontend mengambil ulang daftar artikel.
Artikel baru muncul di halaman.

Kita baru saja menghubungkan frontend dan backend menggunakan JavaScript murni.

21. Melihat Komunikasi API melalui Network#

Sekarang buka Developer Tools browser.

Pilih tab Network.

Kemudian muat ulang halaman.

Cari request:

1
GET /api/artikel

Perhatikan informasi berikut:

Request method.
Request URL.
Status code.
Response headers.
Response body.

Sekarang tambahkan artikel melalui formulir.

Cari request:

1
POST /api/artikel

Perhatikan request payload yang dikirim.

Contohnya:

1
{
2
  "judul": "Belajar Fetch API",
3
  "kategori": "JavaScript"
4
}

Lihat juga respons yang dikembalikan backend.

Jika berhasil, statusnya:

1
201 Created

Ini membantu kita melihat secara langsung bagaimana browser dan backend berkomunikasi.

22. Mengapa Data Hilang Setelah Server Restart?#

Pada latihan ini, backend masih menyimpan artikel dalam array JavaScript.

Contohnya:

1
let artikel = [
2
  { id: 1, judul: "Belajar HTML", kategori: "HTML" }
3
];

Ketika server dihentikan, data yang hanya berada di memori tidak disimpan secara permanen.

Ketika server dijalankan kembali, array dibuat ulang dari nilai awal.

Karena itu, artikel yang ditambahkan melalui formulir akan hilang setelah proses server dimulai ulang.

Ini bukan kesalahan Fetch API.

Fetch API hanya menangani komunikasi HTTP.

Penyimpanan data merupakan tanggung jawab backend dan sistem penyimpanan yang digunakan.

Kita akan membahas penyimpanan permanen pada seri Database.

23. Kesalahan yang Sering Terjadi#

Membuka HTML langsung menggunakan file://#

Jika kita membuka:

1
file:///C:/belajar-fetch-api/public/index.html

Halaman tidak menggunakan origin server HTTP yang kita siapkan.

Akibatnya, request relatif seperti:

1
fetch("/api/artikel")

Tidak akan menuju backend sesuai rancangan latihan.

Buka halaman melalui:

1
http://localhost:3000

Server belum berjalan#

Jika Node.js belum dijalankan, browser tidak dapat menghubungi backend.

Pastikan terminal masih menjalankan:

1
node server.js

Port sudah digunakan#

Jika muncul error EADDRINUSE, kemungkinan port 3000 sudah digunakan proses lain.

Hentikan proses sebelumnya atau ubah port server.

Menggunakan hostname atau port yang berbeda#

Perhatikan perbedaan antara:

1
localhost

Dan:

1
127.0.0.1

Serta perbedaan port.

Untuk latihan ini, selalu buka frontend melalui alamat yang ditampilkan server.

Lupa menggunakan await#

Kode:

1
const response = fetch("/api/artikel");

Menghasilkan Promise, bukan objek Response yang sudah tersedia.

Gunakan:

1
const response = await fetch("/api/artikel");

Di dalam async function.

Menganggap fetch gagal otomatis ketika status 404#

Tidak.

Periksa:

1
response.ok

Atau:

1
response.status

Untuk mengetahui hasil HTTP request.

Menggunakan innerHTML untuk menampilkan data sembarang#

Hindari memasukkan data yang tidak dipercaya langsung ke innerHTML.

Untuk teks biasa, gunakan textContent.

Menganggap validasi frontend sudah cukup#

Backend tetap harus memvalidasi data.

Pengguna dapat mengirim request langsung tanpa melalui formulir HTML.

Menampilkan seluruh detail error internal#

Frontend sebaiknya menampilkan pesan yang aman dan mudah dipahami.

Detail teknis error internal lebih tepat dicatat pada log backend.

24. Latihan Mandiri#

Sekarang kita coba mengembangkan aplikasi.

Latihan 1: Menampilkan jumlah artikel#

Tambahkan elemen HTML yang menunjukkan jumlah artikel.

Perbarui nilainya setiap kali data berhasil diambil.

Latihan 2: Menambahkan tombol kosongkan formulir#

Tambahkan tombol untuk menghapus seluruh isi input formulir.

Pastikan tombol tersebut tidak mengirim request POST.

Latihan 3: Menampilkan kategori dengan gaya berbeda#

Ubah CSS agar kategori artikel terlihat seperti label.

Latihan 4: Menampilkan pesan ketika daftar kosong#

Jika API mengembalikan array kosong, tampilkan pesan:

1
Belum ada artikel.

Jangan hanya menampilkan daftar kosong tanpa penjelasan.

Latihan 5: Menguji error jaringan#

Jalankan halaman terlebih dahulu.

Kemudian hentikan server Node.js.

Tekan tombol Muat Ulang.

Amati bagaimana frontend menampilkan pesan error.

Setelah itu, jalankan kembali server dan coba lagi.

Latihan 6: Menambahkan tombol hapus#

Sebagai tantangan tambahan, kembangkan backend dengan endpoint DELETE seperti pada artikel sebelumnya.

Kemudian tambahkan tombol hapus pada setiap artikel.

Gunakan Fetch API dengan method DELETE.

Pastikan pengguna mendapat konfirmasi sebelum penghapusan dilakukan.

25. Apa yang Sudah Kita Pelajari?#

Pada artikel ini, kita berhasil menghubungkan frontend dan backend menggunakan Fetch API.

Kita sudah mempraktikkan:

Mengirim HTTP request melalui browser.
Mengenal Promise.
Menggunakan .then() dan .catch().
Menggunakan async/await.
Menangani error dengan try...catch.
Memeriksa response.ok.
Membaca JSON menggunakan response.json().
Mengirim JSON menggunakan JSON.stringify().
Membuat loading state.
Menampilkan data API ke HTML.
Mengirim data formulir menggunakan POST.
Memahami konsep origin dan CORS.
Menggunakan satu HTTP server untuk frontend dan API.

Dengan pengetahuan tersebut, kita sudah dapat membuat halaman web yang berkomunikasi dengan backend sendiri.

26. Penutup#

Selamat, Gabuters!

Kita berhasil membuat aplikasi sederhana yang menghubungkan HTML, CSS, JavaScript, dan backend Node.js native.

Frontend dapat mengambil data artikel dan mengirim data baru melalui Fetch API.

Backend menerima request, memvalidasi data, dan mengembalikan respons JSON.

Kita juga belajar bahwa komunikasi API membutuhkan penanganan error dan pengalaman pengguna yang baik.

Namun, kita belum selesai.

Pada seri JavaScript sebelumnya, kita sudah membuat halaman profil interaktif.

Bagaimana jika halaman profil tersebut kita kembangkan agar formulir kontaknya benar-benar mengirim data ke backend?

Bagaimana jika backend memvalidasi pesan dan menyediakan endpoint untuk melihat pesan yang diterima?

Pada artikel berikutnya, kita akan membuat Mini Project: Membuat API untuk Halaman Profil Interaktif.

Kita akan menggabungkan seluruh pembelajaran dari seri Backend dan API dalam satu proyek kecil.

Tetap tanpa Express dan tanpa database terlebih dahulu.

Sampai jumpa di artikel berikutnya, Gabuters!

Menghubungkan Frontend ke Backend dengan Fetch API

1. Mengapa Frontend Perlu Berkomunikasi dengan Backend?#

2. Apa Itu Fetch API?#

3. Mengenal Promise#

4. Menggunakan fetch() dengan then()#

5. Memeriksa response.ok#

6. Mengenal async dan await#

7. Menangani Error dengan try…catch#

8. Mengenal Same-Origin Policy dan CORS#

9. Cara Menghindari Masalah CORS Saat Belajar#

10. Menyiapkan Proyek#

11. Membuat Backend API dan Server Frontend#

Catatan keamanan#

12. Membuat Struktur HTML#

Daftar artikel#

Status daftar#

Formulir#

13. Menambahkan CSS Sederhana#

14. Mengambil Data Menggunakan Fetch API#

15. Menampilkan Data ke HTML#

Mengapa menggunakan textContent?#

16. Menambahkan Loading State#

17. Mengirim Data Menggunakan POST#

method#

headers#

body#

18. Membaca Pesan Error dari Backend#

19. Membuat JavaScript Frontend Lengkap#

20. Menjalankan Aplikasi#

21. Melihat Komunikasi API melalui Network#

22. Mengapa Data Hilang Setelah Server Restart?#

23. Kesalahan yang Sering Terjadi#

Membuka HTML langsung menggunakan file://#

Server belum berjalan#

Port sudah digunakan#

Menggunakan hostname atau port yang berbeda#

Lupa menggunakan await#

Menganggap fetch gagal otomatis ketika status 404#

Menggunakan innerHTML untuk menampilkan data sembarang#

Menganggap validasi frontend sudah cukup#

Menampilkan seluruh detail error internal#

24. Latihan Mandiri#

Latihan 1: Menampilkan jumlah artikel#

Latihan 2: Menambahkan tombol kosongkan formulir#

Latihan 3: Menampilkan kategori dengan gaya berbeda#

Latihan 4: Menampilkan pesan ketika daftar kosong#

Latihan 5: Menguji error jaringan#

Latihan 6: Menambahkan tombol hapus#

25. Apa yang Sudah Kita Pelajari?#

26. Penutup#

Bagikan Artikel

Bacaan terkait

Coba jalur lain