FetchAPI dalam JavaScript

Apa itu Fetch API?

Fetch API adalah antarmuka modern yang menyediakan cara untuk membuat permintaan HTTP dari browser. Ini menggantikan XMLHttpRequest (XHR) yang lebih tua dan menawarkan API yang lebih sederhana dan lebih fleksibel untuk mengirim permintaan jaringan secara asinkron. Fetch API mengembalikan promise, yang memungkinkan penanganan asinkron yang lebih mudah dan bersih.

Contoh Penggunaan Fetch API

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch API Example</title>
</head>
<body>
    <h1>Fetch API Example</h1>
    <button id="fetchButton">Fetch Data</button>
    <pre id="output"></pre>

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

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', () => {
    const fetchButton = document.getElementById('fetchButton');
    const output = document.getElementById('output');

    fetchButton.addEventListener('click', () => {
        fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok ' + response.statusText);
                }
                return response.json();
            })
            .then(data => {
                output.textContent = JSON.stringify(data, null, 2);
            })
            .catch(error => {
                output.textContent = 'Fetch error: ' + error.message;
            });
    });
});

Penjelasan Kode

HTML:
- fetchButton: Tombol untuk memicu permintaan Fetch.
- output: Elemen untuk menampilkan hasil dari permintaan Fetch.
JavaScript:
- Mendengarkan event DOMContentLoaded untuk memastikan DOM telah dimuat sebelum menambahkan event listener.
- Menambahkan event listener ke tombol fetchButton untuk menangani klik.
- Menggunakan fetch untuk membuat permintaan GET ke URL https://jsonplaceholder.typicode.com/posts.
- fetch mengembalikan promise yang diurai (resolved) ke response ketika permintaan berhasil.
- Memeriksa apakah response.ok adalah true untuk memastikan bahwa permintaan berhasil.
- Mengurai response sebagai JSON menggunakan response.json(), yang juga mengembalikan promise.
- Menangani data yang diurai dan menampilkannya di elemen output dalam format JSON yang lebih mudah dibaca.
- Menangani kesalahan dengan catch untuk menangkap dan menampilkan pesan kesalahan jika permintaan gagal.

Sumber

Fetch API adalah alat yang kuat dan mudah digunakan untuk membuat permintaan HTTP dalam aplikasi web modern. Ini menggantikan XMLHttpRequest dengan antarmuka yang lebih sederhana dan berbasis promise, memungkinkan penanganan asinkron yang lebih mudah dan lebih bersih.

PreviousLocalStorage dalam JavaScript NextApa itu React?

Last updated 8 months ago

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fetch API Example</title> </head> <body> <h1>Fetch API Example</h1> <button id="fetchButton">Fetch Data</button> <pre id="output"></pre> <script src="script.js"></script> </body> </html>