React | Data Fetching

Overview

Dalam dunia pengembangan aplikasi web, React adalah salah satu framework yang paling populer. React memungkinkan kita untuk membangun antarmuka pengguna yang interaktif dan responsif. Namun, untuk membuat aplikasi yang lebih dinamis, seringkali kita perlu mengambil data dari server eksternal, seperti database atau layanan web. Inilah yang disebut dengan data fetching.

Data fetching adalah proses mengambil data dari sumber eksternal, seperti API (Application Programming Interface) atau database, dan menampilkannya di aplikasi kita. Proses ini memungkinkan aplikasi kita untuk menampilkan data yang terbaru dan relevan kepada pengguna.

Apa yang Dimaksud dengan Data Fetching?

Data fetching adalah istilah yang digunakan untuk menggambarkan proses mengambil data dari sumber eksternal, seperti server atau database, dan mengintegrasikannya ke dalam aplikasi kita. Data ini dapat berupa teks, gambar, JSON, XML, atau format data lainnya. Dalam konteks React, data fetching biasanya digunakan untuk mengambil data yang akan ditampilkan dalam komponen atau antarmuka pengguna.

Proses data fetching biasanya melibatkan pengiriman permintaan HTTP ke server, menerima respons dari server, dan kemudian memproses respons tersebut. Respons tersebut kemudian dapat digunakan untuk mengisi komponen React, mengubah keadaan aplikasi, atau melakukan tindakan lain sesuai kebutuhan.

Data fetching adalah aspek yang krusial dalam pengembangan aplikasi web modern, karena memungkinkan kita untuk memperbarui informasi secara dinamis tanpa harus memuat ulang halaman. Ini membuat aplikasi lebih responsif dan interaktif.

Kenapa Data Fetching Perlu Diterapkan?

Data fetching penting dalam pengembangan aplikasi web karena alasan berikut:

Aplikasi Dinamis: Data fetching memungkinkan aplikasi kita untuk berinteraksi dengan sumber data eksternal dan menampilkan informasi yang selalu diperbarui kepada pengguna. Ini membuat aplikasi kita lebih dinamis dan relevan.
Separasi Tugas: Data fetching memisahkan logika pengambilan data dari logika komponen. Ini memungkinkan kita untuk mengorganisasi kode dengan lebih baik, membuat komponen lebih mudah dipahami, dan memungkinkan pengembangan bersama tim dengan lebih efisien.
Interoperabilitas: Data fetching memungkinkan kita untuk berkomunikasi dengan berbagai jenis server dan layanan, seperti RESTful APIs, GraphQL, atau server WebSocket. Ini membuat aplikasi kita lebih fleksibel dalam berinteraksi dengan berbagai sumber data.
Penggunaan Sumber Eksternal: Data fetching memungkinkan kita mengintegrasikan data dari berbagai sumber eksternal, seperti database, penyedia layanan pihak ketiga, atau sumber data terdistribusi. Ini memperluas kemungkinan aplikasi kita.

Struktur URL saat Data Fetching

Dalam data fetching, URL (Uniform Resource Locator) digunakan untuk menentukan sumber data yang akan diambil. URL terdiri dari dua bagian utama: Base URL dan Endpoint.

Base URL: Base URL adalah alamat dasar dari server atau layanan yang menyediakan data. Biasanya, ini adalah alamat yang sama untuk semua permintaan yang dilakukan ke server tersebut. Misalnya, https://api.example.com.
Endpoint: Endpoint adalah bagian dari URL yang menentukan sumber data yang spesifik atau operasi yang akan dijalankan pada server. Ini dapat berupa alamat ke objek tertentu di database atau operasi seperti get, update, delete, atau search. Contohnya, https://api.example.com/posts adalah endpoint untuk mengambil daftar posting, sementara https://api.example.com/posts/123 adalah endpoint untuk mendapatkan informasi postingan dengan ID 123.

Macam-macam Metode saat Fetch Data

Ada beberapa metode yang umum digunakan saat melakukan data fetching. Metode yang digunakan tergantung pada jenis operasi yang ingin kita lakukan pada data. Beberapa metode umum yang digunakan adalah:

GET: Metode GET digunakan untuk mengambil data dari server. Permintaan GET biasanya tidak mengubah data di server dan hanya digunakan untuk membaca informasi. Ini adalah metode yang umum digunakan dalam pengambilan data.

Contoh penggunaan metode GET dengan fetch:

fetch("https://api.example.com/posts", {
    method: "GET",
})
.then((response) => response.json())
.then((result) => console.log(result))
.catch((error) => console.log(error));

POST: Metode POST digunakan untuk mengirim data baru ke server. Ini sering digunakan untuk membuat entri baru dalam database atau melakukan tindakan yang memerlukan pengiriman data.

Contoh penggunaan metode POST dengan axios:

fetch("https://api.example.com/posts", {
    method: "POST",
    body: JSON.stringify({
        title: "Judul Posting",
        content: "Konten Posting",
    }),
})
.then((response) => response.json())
.then((result) => console.log("Data berhasil dibuat"))
.catch((error) => console.log(error));

PUT: Metode PUT digunakan untuk mengganti data yang ada di server. Ini digunakan ketika kita ingin memperbarui informasi yang sudah ada.

Contoh penggunaan metode PUT dengan fetch:

fetch("https://api.example.com/posts/123", {
    method: "PUT",
    body: JSON.stringify({
        title: "Judul yang Diperbarui",
    }),
})
.then((response) => response.json())
.then((result) => console.log("Data berhasil diperbarui"))
.catch((error) => console.log(error));

DELETE: Metode DELETE digunakan untuk menghapus data dari server. Ini digunakan ketika kita ingin menghapus entri atau informasi tertentu.

Contoh penggunaan metode DELETE dengan axios:

fetch("https://api.example.com/posts/123", {
    method: "DELETE",
})
.then((response) => response.json())
.then((result) => console.log("Data berhasil dihapus"))
.catch((error) => console.log(error));

Masing-masing dari metode ini digunakan sesuai kebutuhan aplikasi kita. Sekarang, mari kita melanjutkan dengan contoh penerapan data fetching menggunakan Fetch API dan Axios.

Contoh Penerapan Data Fetch

Menggunakan Fetch API

Fetch API adalah cara bawaan untuk melakukan data fetching dalam JavaScript. Berikut adalah contoh penggunaan Fetch API untuk mengambil daftar posting dari server:

fetch("https://api.example.com/posts")
  .then((response) => response.json())
  .then((data) => {
    // Menggunakan data di sini
    console.log(data);
  })
  .catch((error) => {
    console.error("Terjadi kesalahan:", error);
  });

Menggunakan Axios

Axios adalah pustaka JavaScript yang populer untuk melakukan data fetching. Ini menyediakan antarmuka yang mudah digunakan dan memiliki banyak fitur yang berguna. Berikut adalah contoh penggunaan Axios untuk mengambil data pengguna dari server:

import axios from "axios";
 
axios
  .get("https://api.example.com/users/123")
  .then((response) => {
    // Menggunakan data di sini
    console.log(response.data);
  })
  .catch((error) => {
    console.error("Terjadi kesalahan:", error);
  });

Kedua contoh di atas mengilustrasikan bagaimana kita dapat mengambil data dari server dengan mudah menggunakan Fetch API atau Axios. Selanjutnya, mari kita bahas tentang status code dan respons dari data fetching.

Status Code dan Respons dari Data Fetching

Setiap permintaan data fetching menghasilkan respons dari server, yang mencakup status code dan data yang diminta. Status code adalah cara bagi server untuk memberi tahu kita apakah permintaan berhasil atau tidak. Berikut adalah beberapa status code umum dan arti dari masing-masing:

200 OK: Permintaan berhasil. Data yang diminta ada dan dikirimkan.
201 Created: Permintaan berhasil dan sumber daya baru telah dibuat.
204 No Content: Permintaan berhasil, tetapi tidak ada data yang dikirimkan dalam respons.
400 Bad Request: Ada masalah dengan permintaan yang diajukan, seperti data yang tidak valid.
401 Unauthorized: Permintaan memerlukan otentikasi pengguna, dan pengguna belum terotentikasi.
404 Not Found: Data yang diminta tidak ditemukan di server.
500 Internal Server Error: Terjadi kesalahan di sisi server saat memproses permintaan.

Selain status code, respons dari data fetching juga mengandung data yang diminta, yang dapat berupa JSON, XML, atau format data lainnya, tergantung pada endpoint yang diakses. Untuk status code yang lain dapat dilihat disini (opens in a new tab).

Kesimpulan

Data fetching adalah komponen kunci dalam pengembangan aplikasi web modern, yang memungkinkan aplikasi kita menjadi lebih dinamis dan interaktif agar pengguna tidak merasa bosan dengan melihat konten yang sama setiap kali mengakses website/aplikasi kita. Untuk melakukan data fetch perlu menggunakan sebuah function atau library khusus digunakan untuk membantu kita dalam melakukan data fetching yaitu Fetch API dan axios. Dalam data fetching, ada beberapa method HTTP yang sering digunakan yaitu GET, POST, PUT, dan DELETE yang memiliki kegunaan masing-masing.

Props Event Handling