Tutorial Fetch API JavaScript: Mengambil Data dari Server

Dalam dunia pengembangan web modern, kebutuhan untuk mengambil data dari server dengan JavaScript adalah hal yang tidak bisa dihindari. Hampir semua aplikasi web—mulai dari blog sederhana hingga dashboard analitik berskala besar—bergantung pada proses komunikasi antara client dan server. Di sinilah Fetch API JavaScript hadir sebagai solusi yang lebih bersih, modern, dan mudah dipahami dibandingkan metode lama seperti XMLHttpRequest.

Bagi pemula, memahami cara kerja fetch API JavaScript dapat terasa membingungkan pada awalnya, terutama karena berkaitan dengan promise, response handling, HTTP method, hingga penggunaan async/await. Namun tenang saja—tutorial ini dirancang untuk membantu kamu memahaminya secara perlahan, langkah demi langkah, dengan contoh yang jelas dan bahasa yang santai.

Melalui artikel ini, kamu akan belajar:

Bagaimana cara menggunakan fetch JavaScript
Bagaimana melakukan permintaan GET dan POST
Cara menangani error dengan benar
Cara mengirim data ke server
Bagaimana bekerja dengan JSON
Memahami opsi lanjutan seperti headers, CORS, dan best practice

Tujuan akhirnya sederhana:

Kamu bisa menggunakan Fetch API secara percaya diri dalam proyek web nyata.

Jika kamu baru mulai belajar JavaScript atau masih bingung menggunakan fetch API untuk REST API, artikel ini akan menjadi panduan lengkap yang sangat membantu.

Siap belajar? Mari kita mulai!

Daftar isi

Pengantar Fetch API JavaScript
Cara Menggunakan Fetch API (GET Request)
Fetch API POST: Mengirim Data ke Server
Handling Response & Error (Best Practice)
Kesimpulan

Pengantar Fetch API JavaScript

Dalam pengembangan web modern, kebutuhan untuk mengambil data dari server dengan JavaScript sudah menjadi bagian penting dalam hampir semua aplikasi. Mulai dari menampilkan daftar produk, informasi cuaca, data pengguna, hingga mengambil artikel blog — semuanya membutuhkan komunikasi HTTP.

Untuk itu, JavaScript menyediakan fitur modern bernama Fetch API, cara paling sederhana dan fleksibel untuk melakukan request ke server.

Pada bagian ini, kamu akan mempelajari apa itu Fetch API, bagaimana cara kerjanya, dan mengapa hampir semua developer web saat ini menggunakannya.

1. Apa Itu Fetch API?

Fetch API adalah fitur native JavaScript yang digunakan untuk melakukan permintaan HTTP seperti GET, POST, PUT, dan DELETE. Fitur ini menggantikan cara lama (XMLHttpRequest) dengan sintaks yang jauh lebih bersih, mudah dibaca, dan berbasis Promise.

Contoh sederhana mengambil data dari server:

fetch("https://jsonplaceholder.typicode.com/posts")
        .then(response => response.json())
        .then(data => console.log(data));Code language: JavaScript (javascript)

Fetch API tersedia di semua browser modern tanpa library tambahan.

2. Kenapa Fetch Lebih Modern Dibanding XMLHttpRequest?

Sebelum Fetch ada, developer menggunakan XMLHttpRequest (XHR) yang sintaksnya cukup rumit. Fetch hadir dengan konsep yang lebih modern.

Fitur	XMLHttpRequest	Fetch API
Gaya penulisan	Berbasis event	Berbasis Promise
Sintaks	Panjang & sulit dibaca	Ringkas & intuitif
Parsing JSON	Manual	`response.json()`
Error handling	Tidak konsisten	`try...catch`
async/await	Tidak natural	Sangat cocok

3. Kapan Menggunakan Fetch API?

Fetch sangat cocok digunakan dalam berbagai kondisi:

Mengambil data API (misalnya cuaca, berita, artikel)
Mengirim data formulir ke server
Mengambil gambar, file, atau blob
Aplikasi SPA (React, Vue, Svelte, dsb.)
Membuat fitur pencarian real-time
Mengambil data dummy untuk belajar JavaScript

Dalam tutorial ini kita akan menggunakan layanan API gratis yang memang menyediakan data dummy untuk digunakan dalam berbagai proyek demo maupun belajar seperti:

JSONPlaceholder
Endpoint: https://jsonplaceholder.typicode.com/posts
Penyedia dummy data seperti postingan, komentar, dan user.
PokéAPI
Endpoint: https://pokeapi.co/api/v2/pokemon/1
Menyediakan data Pokémon dalam bentuk JSON.
RandomUser API
Endpoint: https://randomuser.me/api/
Menyediakan data profil pengguna acak.

4. Cara Kerja Fetch (Promise & Asynchronous)

Untuk memahami Fetch API, kita perlu memahami konsep asynchronous dan Promise.

Asynchronous

Kode berjalan tanpa menunggu request selesai. Sementara permintaan HTTP berjalan di “belakang layar”.

Promise

Fetch mengembalikan Promise dengan status:

Pending
Fulfilled
Rejected

Contoh:

const result = fetch("https://jsonplaceholder.typicode.com/posts");
console.log(result); // Promise <pending>Code language: JavaScript (javascript)

5. Contoh Response Dari API

Berikut contoh data asli dari API, agar kamu bisa membayangkan hasil fetch:

Contoh Response JSON — JSONPlaceholder

Request:

fetch("https://jsonplaceholder.typicode.com/posts/1")
        .then(res => res.json())
        .then(data => console.log(data));Code language: JavaScript (javascript)

Response:

{
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}Code language: JSON / JSON with Comments (json)

Contoh Response JSON — RandomUser API

Request:

fetch("https://randomuser.me/api/")
        .then(res => res.json())
        .then(data => console.log(data));Code language: JavaScript (javascript)

Response:

{
    "results": [
        {
            "gender": "male",
            "name": { "first": "Adam", "last": "Byrd" },
            "email": "adam.byrd@example.com"
        }
    ]
}Code language: JSON / JSON with Comments (json)

6. Struktur Dasar `fetch()`

Format umum penggunaan Fetch API:

fetch(url)
    .then(response => response.json())
    .then(data => {
        // menggunakan data
        console.log(data);
    })
    .catch(error => {
        console.error("Terjadi kesalahan:", error);
    });Code language: JavaScript (javascript)

Versi Modern dengan async/await

Dengan async/await, kode menjadi lebih simpel:

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("Gagal mengambil data:", error);
    }
}Code language: JavaScript (javascript)

Cara Menggunakan Fetch API (GET Request)

Contoh Dasar fetch GET

GET request adalah cara paling umum untuk mengambil data dari server.

Contoh sederhana menggunakan Fetch API untuk mengambil data JSON dari API publik:

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

Response contoh dari API:

{
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit..."
}Code language: JSON / JSON with Comments (json)

fetch + .then() Versi Promise

Fetch menggunakan Promise sehingga kita bisa chaining dengan .then(). Langkahnya:

Panggil fetch(url)
Tangani response dengan response.json()
Ambil data JSON di .then() berikutnya
Tangani error di .catch()

Contoh:

fetch("https://randomuser.me/api/")
    .then(response => response.json())
    .then(data => {
            const user = data.results[0];
            console.log(`Name: ${user.name.first} ${user.name.last}`);
            console.log(`Email: ${user.email}`);
    })
    .catch(error => console.error("Fetch error:", error));Code language: JavaScript (javascript)

Response contoh dari RandomUser API:

{
    "results": [
        {
            "name": { "title": "Mr", "first": "John", "last": "Doe" },
            "email": "john.doe@example.com",
            "login": { "uuid": "123-abc-456", "username": "johndoe" }
        }
    ],
    "info": { "seed": "abc", "results": 1, "page": 1, "version": "1.3" }
}
Code language: JSON / JSON with Comments (json)

fetch + async/await

Versi modern lebih readable menggunakan async/await:

async function fetchUser() {
    try {
        const response = await fetch("https://randomuser.me/api/");
        const data = await response.json();
        const user = data.results[0];
        console.log(`Name: ${user.name.first} ${user.name.last}`);
        console.log(`Email: ${user.email}`);
    } catch (error) {
        console.error("Fetch failed:", error);
    }
}

fetchUser();Code language: JavaScript (javascript)

Cara Menampilkan Data ke Halaman

Kita bisa menampilkan data langsung ke HTML menggunakan DOM:

<div id="user"></div>

<script>
async function showUser() {
    try {
        const response = await fetch("https://randomuser.me/api/");
        const data = await response.json();
        const user = data.results[0];
        document.getElementById("user").innerHTML = `
            <p>Name: ${user.name.first} ${user.name.last}</p>
            <p>Email: ${user.email}</p>
        `;
    } catch (error) {
        console.error(error);
    }
}
showUser();
</script>Code language: HTML, XML (xml)

Error Handling Dasar

Fetch hanya menolak Promise jika terjadi network error.

Untuk menangani status HTTP, kita harus cek response.ok:

fetch("https://jsonplaceholder.typicode.com/invalid-url")
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error("Fetch error:", error));Code language: JavaScript (javascript)

Contoh output console jika URL salah:

Fetch error: Error: HTTP error! status: 404Code language: JavaScript (javascript)

Bagian ini menjelaskan GET request dengan Fetch API, mulai dari versi Promise, async/await, hingga menampilkan data ke halaman dan handling error.

Fetch API POST: Mengirim Data ke Server

Struktur Lengkap Opsi Fetch

Fetch POST request memerlukan opsi tambahan berupa object kedua di fetch(url, options):

fetch("https://example.com/api", {
    method: "POST",       // method HTTP
    headers: {            // header HTTP
        "Content-Type": "application/json",
        "Authorization": "Bearer TOKEN123"
    },
    body: JSON.stringify({ // data yang dikirim
        username: "john",
        password: "123456"
    })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("Error:", error));Code language: JavaScript (javascript)

Mengirim JSON ke Server

Data POST biasanya dikirim dalam format JSON:

const userData = {
    name: "John Doe",
    email: "john@example.com",
    password: "123456"
};

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("Response:", data))
.catch(error => console.error("Error:", error));Code language: JavaScript (javascript)

Contoh response server:

{
    "name": "John Doe",
    "email": "john@example.com",
    "password": "123456",
    "id": 101
}Code language: JSON / JSON with Comments (json)

Menentukan Header

Header penting untuk memberitahu server jenis data yang dikirim:

headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer <token-anda>"
}Code language: JavaScript (javascript)

Content-Type: format data, biasanya application/json
Authorization: token untuk autentikasi API

Menangani Response Server

Fetch POST mirip GET, bisa menggunakan .then() atau async/await:

async function registerUser(userData) {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(userData)
        });
        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
        const result = await response.json();
        console.log("Server Response:", result);
    } catch (error) {
        console.error("Fetch POST failed:", error);
    }
}

registerUser({ name: "Jane Doe", email: "jane@example.com", password: "abcdef" });Code language: JavaScript (javascript)

Form Submission dengan Fetch

Kita bisa gunakan fetch untuk menangani submit form tanpa reload:

<form id="loginForm">
    <input type="text" id="username" placeholder="Username" required>
    <input type="password" id="password" placeholder="Password" required>
    <button type="submit">Login</button>
</form>

<script>
document.getElementById("loginForm").addEventListener("submit", async function(e) {
    e.preventDefault(); // mencegah reload
    const username = document.getElementById("username").value;
    const password = document.getElementById("password").value;

    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ username, password })
        });
        const data = await response.json();
        console.log("Login response:", data);
    } catch (error) {
        console.error("Login error:", error);
    }
});
</script>Code language: HTML, XML (xml)

Handling Response & Error (Best Practice)

Saat bekerja dengan Fetch API JavaScript, salah satu tantangan terbesar adalah bagaimana menangani response dan error dengan benar. Banyak pemula hanya menggunakan .then() tanpa mengecek status server, sehingga bug sulit ditemukan. Pada bagian ini, kita akan belajar cara menangani error dengan baik, memahami perbedaan jenis error, hingga membuat wrapper fetch yang bisa dipakai ulang.

1. Memahami Response Status (200, 400, 500)

Ketika melakukan request menggunakan Fetch, server akan mengembalikan status HTTP:

Status	Arti	Contoh Situasi
200–299	Success	Data berhasil diambil/ditulis
400–499	Client error	Salah input, token invalid, endpoint salah
500–599	Server error	API sedang down, database error

Namun Fetch TIDAK menganggap status 400/500 sebagai error — Fetch tetap resolve, bukan reject.

Contoh:

const response = await fetch("https://api.example.com/data");
console.log(response.ok);  // false jika error 404, 500
console.log(response.status); // misal 404Code language: JavaScript (javascript)

2. Mengecek response.ok

response.ok = true hanya jika status 200–299. Jika tidak, berarti ada error dari server.

Contoh best practice:

const response = await fetch(url);
if (!response.ok) {
    throw new Error(`HTTP Error! Status: ${response.status}`);
}
Code language: JavaScript (javascript)

3. Error Handling Lengkap

Contoh menggunakan .then():

fetch("https://jsonplaceholder.typicode.com/invalid-url")
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP Error: ${response.status}`);
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error("Fetch error:", error.message));Code language: JavaScript (javascript)

Contoh menggunakan async/await (lebih modern)

async function getData() {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts");

        if (!response.ok) {
            throw new Error(`Server Error: ${response.status}`);
        }

        const data = await response.json();
        console.log("Data:", data);

    } catch (error) {
        console.error("Error:", error.message);
    }
}

getData();Code language: JavaScript (javascript)

4. Try/Catch untuk async-await

try/catch berguna untuk menangani:

Network error
Error parsing JSON
Error response status

Contoh:

try {
    const response = await fetch(url);
    const data = await response.json();
} catch (err) {
    console.error("Terjadi error:", err);
}Code language: JavaScript (javascript)

5. Network Error vs Server Error

Jenis Error	Penyebab	Contoh
Server Error (HTTP 4xx / 5xx)	Server merespon dengan status error	404 Not Found / 500 Internal Server Error
Network Error (Fetch gagal total)	Tidak ada internet, DNS error, CORS blocked	Fetch langsung throw error
JavaScript Error	Kesalahan di kode JS	JSON.parse gagal

Contoh network error:

fetch("https://domain-yang-tidak-ada.com")
    .catch(err => console.log("Network Error:", err));Code language: JavaScript (javascript)

Fetch langsung reject.

6. Cara Membuat Reusable Fetch Wrapper

Agar tidak menulis try/catch berulang kali, kita bisa membuat wrapper fetch:

async function fetchWrapper(url, options = {}) {
    try {
        const response = await fetch(url, options);

        if (!response.ok) {
            return {
                success: false,
                status: response.status,
                error: `HTTP Error: ${response.status}`
            };
        }

        const data = await response.json();
        return { success: true, data };

    } catch (error) {
        return {
            success: false,
            error: "Network Error: " + error.message
        };
    }
}Code language: JavaScript (javascript)

Cara pakai:

const result = await fetchWrapper("https://jsonplaceholder.typicode.com/posts");

if (result.success) {
    console.log(result.data);
} else {
    console.error(result.error);
}Code language: JavaScript (javascript)

Wrapper ini sangat berguna untuk aplikasi skala besar.

7. Perbedaan Fetch Error dan HTTP Error

Ini sangat penting!

Kasus	Apakah Fetch Error?	Contoh
Response 404	Tidak	Fetch tetap sukses
Response 500	Tidak	Fetch tetap sukses
Timeout (server lama respon)	Tidak	Fetch menunggu selamanya jika tidak ada abort
Client offline	Ya	Reject dengan “Failed to fetch”
CORS blocked	Ya	Reject

Fetch hanya error ketika benar-benar gagal terhubung.

8. CORS pada Fetch API (Penjelasan Pemula)

CORS = Cross-Origin Resource Sharing.

Dipakai untuk mengatur apakah website A boleh mengakses API dari domain B.

Ketika Fetch ke domain lain:

fetch("https://api.lain.com/data")Code language: JavaScript (javascript)

Access to fetch at 'https://api.lain.com/data'
from origin 'http://localhost' has been blocked by CORS policyCode language: JavaScript (javascript)

Penting:

Ini bukan error JavaScript Anda
Bukan error Fetch
Bukan bisa diatasi dari front-end
Hanya bisa diperbaiki dari server

Cara mencegah error CORS (opsi server):

Menambahkan header: Access-Control-Allow-Origin: *
Mengizinkan method tertentu
Mengatur credentials

Untuk pemula:

Jika CORS error → berarti API tidak mengizinkan akses website kita.

Kesimpulan

Fetch API JavaScript adalah fitur modern yang memudahkan proses mengambil data dari server dengan JavaScript secara lebih sederhana, cepat, dan efisien dibandingkan penggunaan XMLHttpRequest. Dengan memanfaatkan Promise dan async/await, proses asynchronous menjadi jauh lebih mudah dipahami oleh pemula, baik saat melakukan fetch GET maupun fetch POST. Melalui berbagai contoh seperti penggunaan API publik, mengirim JSON, mengatur headers, hingga cara menggunakan fetch JavaScript pada form submission, developer bisa memahami alur request–response dengan lebih jelas dan praktis.

Memahami tutorial Fetch API untuk pemula sangat penting karena hampir semua aplikasi web modern terhubung dengan layanan REST API. Mulai dari handling response, pengecekan response.ok, try/catch, hingga penanganan error jaringan dan HTTP error, semuanya wajib dikuasai agar aplikasi tetap stabil. Selain itu, mengenal aspek penting seperti CORS, optimasi permintaan HTTP dengan fetch, serta best practice fetch API JavaScript akan membantu developer membangun aplikasi yang aman dan scalable. Dengan fondasi ini, kamu siap melangkah ke level lanjutan dalam pengelolaan data, API, dan integrasi front-end modern.

Tutorial Fetch API JavaScript: Mengambil Data dari Server

Daftar isi

Pengantar Fetch API JavaScript

1. Apa Itu Fetch API?

2. Kenapa Fetch Lebih Modern Dibanding XMLHttpRequest?

3. Kapan Menggunakan Fetch API?

4. Cara Kerja Fetch (Promise & Asynchronous)

Asynchronous

Promise

5. Contoh Response Dari API

6. Struktur Dasar fetch()

Versi Modern dengan async/await

Cara Menggunakan Fetch API (GET Request)

Contoh Dasar fetch GET

fetch + .then() Versi Promise

fetch + async/await

Cara Menampilkan Data ke Halaman

Error Handling Dasar

Fetch API POST: Mengirim Data ke Server

Struktur Lengkap Opsi Fetch

Mengirim JSON ke Server

Menentukan Header

Menangani Response Server

Form Submission dengan Fetch

Handling Response & Error (Best Practice)

1. Memahami Response Status (200, 400, 500)

2. Mengecek response.ok

3. Error Handling Lengkap

4. Try/Catch untuk async-await

5. Network Error vs Server Error

6. Cara Membuat Reusable Fetch Wrapper

7. Perbedaan Fetch Error dan HTTP Error

8. CORS pada Fetch API (Penjelasan Pemula)

Kesimpulan

1 JavaScript Dasar

2 JavaScript Menengah

3 JavaScript Lanjutan

4 JavaScript Mahir

5 JavaScript Ahli

Related article!

Comments

Leave comment

6. Struktur Dasar `fetch()`