Panduan Lengkap API Fetch JavaScript: Dasar-dasar, Contoh, Penanganan Kesalahan, dan Keamanan

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Pendahuluan: Apa Itu Fetch API?

JavaScript memainkan peran penting dalam pengembangan front-end untuk aplikasi web. Di antara banyak fiturnya, Fetch API adalah alat yang kuat untuk melakukan komunikasi asynchronous dengan server. Dalam artikel ini, kami menjelaskan cara menggunakan Fetch API dengan cara yang ramah pemula dan memperkenalkan fiturnya melalui contoh praktis.

Apa Peran Fetch API?

Fetch API adalah antarmuka modern dan standar untuk menangani permintaan dan respons HTTP. Di masa lalu, XMLHttpRequest sering digunakan, tetapi Fetch API menawarkan desain yang lebih sederhana dan lebih intuitif.

Perbedaan antara Fetch API dan XMLHttpRequest

Perbedaan utama antara Fetch API dan XMLHttpRequest tradisional adalah sebagai berikut.

Seperti yang ditunjukkan di atas, Fetch API banyak digunakan sebagai alat yang lebih fleksibel dan ramah pengembang dalam pengembangan web modern.

Contoh Penggunaan Umum untuk Fetch API

Fetch API biasanya digunakan dalam skenario berikut.

1. Pengambilan data: Mengambil informasi pengguna atau data posting dari API.
2. Pengiriman data: Mengirim data formulir atau data JSON ke server.
3. Pembaruan real-time: Menerima data dinamis dari server dan memperbarui konten halaman.
4. Integrasi API eksternal: Menghubungkan dengan API pihak ketiga untuk memperluas fungsionalitas.

Karena alasan tersebut, Fetch API telah menjadi bagian penting dalam pengembangan JavaScript modern.

Ringkasan

Pada bagian ini, kami menjelaskan peran dasar dan keunggulan Fetch API. Dibandingkan dengan XMLHttpRequest tradisional, Fetch API lebih intuitif, lebih mudah digunakan, dan berbasis Promise, sehingga penanganan error menjadi lebih sederhana. Pada bagian berikutnya, kami akan mengeksplorasi penggunaan dasar Fetch API dengan contoh kode yang konkret.

Dengan melanjutkan, Anda akan belajar cara mengambil dan memanipulasi data menggunakan Fetch API secara praktik.

2. Penggunaan Dasar Fetch API (Dengan Contoh Kode)

Pada bagian ini, kami menjelaskan penggunaan dasar Fetch API dengan contoh kode yang konkret. Bahkan pemula dapat mengikutinya, dimulai dengan permintaan GET sederhana.

Sintaks Dasar Fetch API

Sintaks dasar Fetch API ditampilkan di bawah ini.

fetch(url, options)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle errors
  });

• url: Menentukan URL permintaan.
• options: Digunakan untuk mengonfigurasi metode HTTP dan header (opsional).
• then: Menangani respons.
• catch: Menangani error.

Contoh Permintaan GET

Berikut adalah contoh dasar permintaan GET.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('A network error occurred');
    }
    return response.json();
  })
  .then(data => {
    console.log(data); // Display data
  })
  .catch(error => {
    console.error('Error:', error);
  });

Menggunakan async/await

Dengan JavaScript modern, Anda dapat menulis kode yang lebih bersih menggunakan async/await.

async function fetchPost() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) {
      throw new Error('A network error occurred');
    }
    const data = await response.json();
    console.log(data); // Display data
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchPost();

Menambahkan Parameter URL

Untuk menyertakan parameter kueri, tulis permintaan seperti berikut.

const userId = 1;
fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Ringkasan

Pada bagian ini, kami membahas dasar-dasar membuat permintaan GET menggunakan Fetch API.

• Basic syntax: Desain sederhana dan mudah dipahami.
• Error handling: Mendukung kesalahan jaringan dan HTTP.
• async/await: Meningkatkan keterbacaan dan pemeliharaan.
• URL parameters: Memungkinkan implementasi kondisi dinamis dengan mudah.

Bagian berikut menjelaskan cara memproses data respons yang dikembalikan oleh Fetch API secara lebih detail.

3. Penanganan Respons dan Konversi Format Data

Pada bagian ini, kami menjelaskan cara menangani respons yang diambil menggunakan Fetch API. Kami terutama fokus pada konversi data JSON serta bekerja dengan data teks dan biner.

Apa Itu Objek Respons Fetch API?

Dengan Fetch API, respons yang dikembalikan setelah permintaan disediakan sebagai objek Response.

Properti Utama

Mengambil dan Mengonversi Data JSON

Dengan Fetch API, server sering mengembalikan data dalam format JSON.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('Response error: ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Mengambil Data Teks

Dalam beberapa kasus, Anda mungkin perlu mengambil data dalam teks biasa alih-alih JSON.

fetch('https://example.com/textfile.txt')
  .then(response => response.text())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Mengambil Data Biner

Untuk mengambil gambar atau file sebagai data biner, gunakan blob() atau arrayBuffer().

fetch('https://example.com/image.jpg')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    document.getElementById('image').src = url;
  })
  .catch(error => console.error('Error:', error));

Ringkasan

Pada bagian ini, Anda telah mempelajari cara menangani respons Fetch API dan mengonversi format data.

• Data JSON: Mendukung format respons server yang paling umum.
• Data teks dan biner: Mengambil format yang berbeda sesuai kebutuhan.
• Header respons: Berguna untuk manajemen data dan pemeriksaan keamanan.

4. Mengirim Permintaan POST (Dengan Contoh Praktis)

Pada bagian ini, kami menjelaskan cara mengirim data ke server menggunakan permintaan POST dengan Fetch API. Kami membahas cara mengirim data formulir dan data JSON menggunakan contoh praktis.

Sintaks Dasar untuk Permintaan POST

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})

• method: Menentukan metode HTTP yang akan digunakan (dalam hal ini, POST ).
• headers: Menentukan format data (mis., JSON atau data formulir).
• body: Mengonversi data menjadi string dan mengirimkannya.

Contoh: Mengirim Data JSON

const userData = {
  name: 'Taro Tanaka',
  email: 'taro.tanaka@example.com'
};

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch(error => console.error('Error:', error));

Contoh: Mengirim Data Formulir

const formData = new FormData();
formData.append('name', 'Taro Tanaka');
formData.append('email', 'taro.tanaka@example.com');

fetch('https://example.com/api/submit', {
  method: 'POST',
  body: formData
})
  .then(response => response.text())
  .then(data => console.log('Success:', data))
  .catch(error => console.error('Error:', error));

Contoh: Permintaan dengan Autentikasi

fetch('https://example.com/api/protected', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
  },
  body: JSON.stringify({ query: 'data' })
})
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch(error => console.error('Error:', error));

Ringkasan

In this section, we covered the basics and practical usage of POST requests with the Fetch API.

• Sending JSON data: Ideal for API integration.
• Sending form data: Works well for simple forms and file uploads.
• Authenticated requests: Supports API security requirements.

The next section dives deeper into Fetch API error handling and debugging techniques.

5. Penanganan Kesalahan dan Teknik Debugging

In this section, we take a detailed look at error handling and debugging techniques when using the Fetch API.

Kesalahan Umum yang Terjadi pada Fetch API

Penanganan Kesalahan Dasar

fetch('https://jsonplaceholder.typicode.com/posts/9999')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .catch(error => console.error('Error:', error.message));

Menangani Timeout

const controller = new AbortController();
const signal = controller.signal;

const timeout = setTimeout(() => controller.abort(), 5000);

fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(response => response.json())
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('Timeout: The request was aborted');
    } else {
      console.error('Error:', error.message);
    }
  })
  .finally(() => clearTimeout(timeout));

Teknik Debugging

1. Mencatat output:

   fetch('https://example.com/api/data')
     .then(response => {
       console.log('Status code:', response.status);
       return response.json();
     })
     .then(data => console.log('Data:', data))
     .catch(error => console.error('Error:', error.message));
   

2. Alat pengembang browser (tab Network):

• Inspect requests and responses in real time.

Ringkasan

In this section, we explored error handling and debugging techniques for the Fetch API.

• Kesalahan umum: Network errors, JSON parsing errors, and timeout issues.
• Penanganan kesalahan terperinci: Practical examples with clear error handling logic.
• Debugging: Identify issues using logs and browser developer tools.

The next section explains advanced usage patterns and security measures for the Fetch API.

6. Penggunaan Lanjutan dan Langkah Keamanan

In this section, we explain advanced usage techniques and security considerations for the Fetch API.

Membatalkan Permintaan (AbortController)

const controller = new AbortController();
const signal = controller.signal;

fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(response => response.json())
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('The request was aborted');
    } else {
      console.error('Error:', error.message);
    }
  });

setTimeout(() => controller.abort(), 3000); // Abort after 3 seconds

Permintaan dengan Kredensial Autentikasi

const token = 'YOUR_ACCESS_TOKEN';

fetch('https://example.com/api/protected', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => console.log('Data:', data))
  .catch(error => console.error('Error:', error));

Dukungan CORS (Cross-Origin Resource Sharing)

fetch('https://example.com/api/data', {
  method: 'GET',
  mode: 'cors'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Ringkasan

In this section, we covered advanced Fetch API usage and security measures.

• Pembatalan permintaan: Improve efficiency using AbortController.
• Permintaan terautentikasi: Implement API tokens and CSRF countermeasures.
• Penanganan CORS: Address cross-origin issues through proper configuration.

7. Kesalahan Umum dan Pemecahan Masalah (Dengan Tabel Ringkasan)

Pada bagian ini, kami menjelaskan kesalahan umum yang mungkin Anda temui saat menggunakan Fetch API dan cara mengatasinya.

Kesalahan Umum dan Penyebabnya

Penanganan Kesalahan secara Detail

fetch('https://invalid-url.example.com')
  .then(response => response.json())
  .catch(error => {
    if (error.message.includes('Failed to fetch')) {
      console.error('Network error');
    } else {
      console.error('Other error:', error.message);
    }
  });

Ringkasan

Pada bagian ini, kami meninjau kesalahan umum Fetch API dan cara menanganinya.

• Kesalahan umum: Kesalahan jaringan, kesalahan format JSON, dan masalah timeout.
• Penanganan detail: Contoh praktis yang menunjukkan penanganan kesalahan yang kuat.

8. Contoh Praktis: Membangun Aplikasi Web Sederhana Menggunakan Data API

Pada bagian ini, kami menjelaskan cara membuat aplikasi web sederhana yang mengambil data dari API eksternal menggunakan Fetch API.

Menyiapkan HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Fetch API Sample App</title>
</head>
<body>
  <h1>Post List</h1>
  <button id="fetchButton">Fetch Data</button>
  <ul id="postList"></ul>
  <p id="errorMessage" style="color: red;"></p>

  <script src="app.js"></script>
</body>
</html>

Membuat Kode JavaScript

const fetchButton = document.getElementById('fetchButton');
const postList = document.getElementById('postList');
const errorMessage = document.getElementById('errorMessage');

async function fetchPosts() {
  fetchButton.disabled = true;
  errorMessage.textContent = '';
  postList.innerHTML = '';

  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    const posts = await response.json();
    posts.forEach(post => {
      const listItem = document.createElement('li');
      listItem.textContent = `${post.id}: ${post.title}`;
      postList.appendChild(listItem);
    });
  } catch (error) {
    errorMessage.textContent = 'Failed to retrieve data.';
  } finally {
    fetchButton.disabled = false;
  }
}

fetchButton.addEventListener('click', fetchPosts);

Ringkasan

Pada bagian ini, kami mendemonstrasikan cara membangun aplikasi web praktis menggunakan Fetch API.

• Fitur utama: Pengambilan data dan rendering daftar.
• Penanganan kesalahan: Menampilkan pesan yang ramah pengguna saat gagal.

9. Kesimpulan dan Langkah Selanjutnya

Dalam artikel ini, kami membahas Fetch API secara komprehensif, mulai dari dasar hingga penggunaan lanjutan dan contoh praktis. Pada bagian akhir ini, kami meninjau poin-poin penting dari setiap bagian dan menyarankan apa yang harus dipelajari selanjutnya.

Poin Penting

Struktur Dasar dan Fitur Fetch API

• Fetch API adalah antarmuka yang kuat untuk melakukan komunikasi asinkron dengan server dalam JavaScript.
• Dibandingkan dengan XMLHttpRequest tradisional, ia lebih sederhana, lebih fleksibel, dan berbasis Promise, yang secara signifikan meningkatkan keterbacaan.

Pengambilan Data dan Penanganan Respons

• Kami menjelaskan cara mengambil data JSON, teks, dan biner.
• Dengan menggunakan async/await, Anda dapat menulis kode yang lebih intuitif dengan penanganan kesalahan yang lebih sederhana.

Pengiriman Data dan Permintaan POST

• Anda belajar cara mengirim data JSON dan data formulir ke server.
• Permintaan aman menggunakan token otentikasi juga dibahas.

Teknik Penanganan Kesalahan dan Debugging

• Kami memperkenalkan solusi praktis untuk kesalahan jaringan dan kesalahan parsing JSON.
• Teknik lanjutan seperti timeout permintaan dan pembatalan permintaan telah diimplementasikan.

Membangun Aplikasi Web Praktis

• Anda membangun aplikasi web yang mengambil data dari API eksternal dan menampilkannya secara dinamis di UI.
• Melalui penanganan kesalahan dan kontrol status tombol, Anda mempelajari pola desain yang mencerminkan skenario pengembangan dunia nyata.

Langkah Selanjutnya

Untuk memanfaatkan Fetch API dengan lebih baik, pertimbangkan mempelajari topik‑topik berikut.

Teknik Implementasi API Lanjutan

• Paginasi dan penyortiran: Optimalkan pemrosesan saat menangani dataset besar.
• Fungsi pencarian: Implementasikan penyaringan data berdasarkan input pengguna.
• Unggah file: Tangani unggahan gambar dan video.

Peningkatan Keamanan

• OAuth 2.0 dan otentikasi: Pahami proses otentikasi dan otorisasi untuk koneksi API yang aman.
• Perlindungan CSRF dan XSS: Implementasikan pengiriman formulir yang lebih aman dan lindungi dari skrip berbahaya.

Integrasi dengan Teknologi Modern

• Pustaka Axios: Alternatif populer untuk Fetch API yang menyederhanakan manajemen permintaan HTTP.
• GraphQL: Model desain API modern yang mengoptimalkan pengambilan data dibandingkan API REST.
• Komunikasi waktu nyata: Implementasikan pertukaran data waktu nyata menggunakan WebSocket atau Server‑Sent Events.

Sumber Belajar

Gunakan dokumentasi resmi dan sumber belajar berikut untuk meningkatkan kemampuan Anda lebih lanjut.

• MDN Web Docs (Resmi): Dokumentasi Fetch API yang detail
• JSONPlaceholder (API Uji): API dummy gratis untuk pengujian
• Situs Pembelajaran JavaScript: JavaScript.info

Catatan Akhir

Melalui artikel ini, Anda telah memperoleh pengetahuan dan keterampilan praktis yang mencakup segala hal mulai dari dasar hingga penggunaan Fetch API di dunia nyata.

Fetch API banyak digunakan untuk tugas mulai dari pengambilan data sederhana hingga integrasi API yang kompleks. Dengan menerapkan apa yang Anda pelajari di sini ke proyek nyata, Anda dapat memperoleh pengalaman praktis yang lebih banyak.

Tindakan Selanjutnya:

• Bangun proyek kecil menggunakan API nyata untuk mendapatkan pengalaman langsung.
• Perkuat penanganan error dan langkah keamanan untuk meningkatkan kesiapan produksi.
• Adopsi teknologi baru seperti GraphQL dan komunikasi waktu nyata untuk memperluas keahlian Anda lebih jauh.