BAB 29 — Menguasai Fetch API & AJAX di JavaScript: GET, POST, Headers, Async/Await, dan CORS

BAB 29 — Menguasai Fetch API & AJAX di JavaScript: GET, POST, Headers, Async/Await, dan CORS

Dalam pengembangan web modern, mengambil dan mengirim data ke server adalah hal yang sangat penting. JavaScript menyediakan beberapa metode untuk berkomunikasi dengan server, mulai dari AJAX klasik hingga Fetch API yang lebih modern.

Bab ini akan membahas konsep dasar GET & POST, penggunaan headers & body, async/await, contoh real API request, error handling, serta CORS.

1. GET & POST dengan Fetch API

GET Request

Digunakan untuk mengambil data dari server.

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

POST Request

Digunakan untuk mengirim data ke server.

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ title: "Hello World", body: "Ini konten", userId: 1 })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("Error:", error));

2. Headers & Body

  • Headers: Menentukan tipe data, token, atau informasi tambahan.
  • Body: Data yang dikirim saat POST, PUT, PATCH, atau DELETE.

Contoh:

fetch("https://api.example.com/data", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer token123"
  },
  body: JSON.stringify({ name: "John Doe", age: 30 })
});

3. Fetch + Async/Await

Menggunakan async/await membuat kode lebih bersih dan mudah dibaca dibanding .then().

Contoh GET:

async function getPost() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}
getPost();

Contoh POST:

async function createPost() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ title: "Async Post", body: "Konten async", userId: 1 })
    });
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}
createPost();

4. Real API Request

Mengakses API publik nyata bisa dilakukan dengan mudah. Contoh mengambil data cuaca:

async function getWeather() {
  const apiKey = "YOUR_API_KEY";
  const city = "Jakarta";
  try {
    const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`);
    const data = await response.json();
    console.log(`${data.name}: ${data.weather[0].description}, Suhu: ${data.main.temp}K`);
  } catch (error) {
    console.error("Gagal mengambil data cuaca:", error);
  }
}
getWeather();

5. Error Handling pada Fetch

Fetch tidak otomatis menolak promise jika status HTTP error (misal 404 atau 500). Jadi perlu dicek manual:

async function getData() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/invalid-endpoint");
    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Fetch error:", error);
  }
}
getData();

6. CORS Dasar

CORS (Cross-Origin Resource Sharing) adalah mekanisme keamanan browser yang mencegah permintaan ke domain berbeda tanpa izin.

  • Jika server mengizinkan, request berhasil.
  • Jika tidak, browser akan menolak dengan error CORS.

Tips:

  • Pastikan server menambahkan header:
Access-Control-Allow-Origin: *
  • Saat development, bisa gunakan proxy atau extension browser untuk bypass sementara.

Kesimpulan

Menguasai Fetch API & AJAX memungkinkan developer:

  • Mengambil data dari server (GET) dan mengirim data (POST) dengan mudah.
  • Mengatur headers dan body untuk autentikasi atau tipe data.
  • Menulis kode lebih bersih dengan async/await.
  • Menghandle error dan status HTTP dengan benar.
  • Memahami CORS untuk komunikasi lintas domain.

Dengan pemahaman ini, interaksi antara client dan server menjadi lebih efisien dan aman.

Related Posts