Advertisement
  1. Code
  2. JavaScript
Code

Mengambil Data dalam Aplikasi React Anda

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

React ini bisa dibilang perpustakaan paling populer untuk membangun aplikasi web interaktif. Namun, React bukanlah kerangka web yang lengkap. Ini berfokus pada bagian pandangan model MVC yang terhormat.

Ada keseluruhan ekosistem React yang membahas aspek lain. Dalam tutorial ini, Anda akan belajar tentang salah satu elemen paling dasar dari aplikasi web apa pun — cara mengambil data untuk ditampilkan. Ini bukan hal sepele. Ada beberapa tempat dalam hierarki komponen React di mana Anda dapat mengambil data. Kapan mengambil data adalah masalah lain. Anda juga perlu mempertimbangkan teknologi apa yang digunakan untuk mengambil data Anda dan di mana untuk menyimpannya.

Di akhir tutorial ini, Anda akan memiliki gambaran yang jelas tentang cara kerja pengambilan data di React, pro dan kontra berbagai pendekatan, dan cara menerapkan pengetahuan ini ke aplikasi React Anda.

Mulai

Mari buat kerangka untuk aplikasi React kita dengan create-react-app:

> create-react-app react-data-fetcher

Hasilnya adalah struktur direktori yang cukup rumit. Baca file README yang sangat baik jika Anda tidak terbiasa dengan create-react-app.

Membuat Server Sederhana

Saya membuat server sederhana untuk menyimpan dan serving quotes. Ini bukan fokus dari tutorial ini, dan perannya adalah menyediakan API jarak jauh untuk menunjukkan cara mengambil data dengan React. Hanya untuk memuaskan rasa ingin tahu Anda, itu adalah aplikasi Python 3 berdasarkan hug framework dan menggunakan Redis sebagai penyimpanan persisten.

API sangat sederhana. Ada satu titik akhir, /quotes. Ia mengembalikan semua quote yang disimpan sebagai tanggapan atas permintaan HTTP GET, dan Anda dapat menambahkan quote baru dengan mengirimkan permintaan HTTP POST.

Source code lengkap tersedia di GitHub.

Ikhtisar Aplikasi Demo

Aplikasi demo adalah aplikasi React yang berkomunikasi dengan quote service, menampilkan semua quote, dan memungkinkan Anda menambahkan quote baru.

Berikut adalah screenshot:

A screenshot of the demo application

Struktur aplikasinya sangat sederhana. Saya mulai dengan kerangka yang dibuat oleh create-react-app dan menambahkan dua komponen di sub-direktori src: QuoteList dan AddQuoteForm. Berikut adalah struktur direktori (tidak termasuk node_modules):

Source code lengkap tersedia di GitLab.

Menampilkan Quote

Komponen fungsional QuoteList menampilkan daftar quote sebagai bullet list. Ia mengharapkan serangkaian string:

Ini adalah child component dari komponen main App.

Mengambil Data Dengan Fetch API

Fetch API adalah API promise-based yang mengembalikan objek respons. Untuk mendapatkan konten JSON yang sebenarnya, Anda perlu menjalankan metode json() dari objek respons.

Menempatkan Data-Fetching Code Anda

React tentu saja semua tentang komponen. Pertanyaan di mana menempatkan Data-Fetching Code adalah penting. Jika Anda factor kode Anda dengan baik, Anda akan memiliki banyak komponen generik dan beberapa komponen khusus aplikasi. React dan JavaScript secara umum sangat fleksibel, sehingga memungkinkan untuk menyuntikkan logika ke mana pun.

Mengambil quote dari REST API membutuhkan beberapa bentuk polling, karena saya ingin quote selalu up to date. Tetapi initial fetch juga penting. React component memiliki metode siklus hidup di mana Anda dapat mengimplementasikan logika yang akan mengeksekusi pada waktu tertentu. Method componentDidMount() menyala ketika komponen dapat diakses dan statusnya diubah. Ini adalah tempat yang sempurna untuk memulai pengambilan data.

Berikut tampilannya:

Jika Anda benar-benar ingin mengurangi waktu untuk first view, Anda dapat mempertimbangkan menggunakan componentWillMount() untuk memulai pengambilan async Anda, tetapi Anda berisiko memiliki fetch selesai sebelum komponen dipasang. Saya tidak merekomendasikan pendekatan ini.

Lihat Mastering React Lifecycle Methods untuk perincian lebih lanjut.

Memilih Seberapa Sering untuk Mengambil Data

Initial fetch dalam componentDidMount() sangat bagus, tetapi saya ingin memperbarui quote secara berkala. Dalam API berbasis REST, satu-satunya solusi adalah secara berkala melakukan polling server. Quote service sangat dasar dan selalu mengembalikan semua quote.

Layanan yang lebih skalabel akan menyediakan cara untuk memeriksa pembaruan atau bahkan menggunakan HTTP if-modify-since atau eTag. Aplikasi demo kita hanya mengambil semuanya setiap lima detik dengan memulai timer di componentDidMount() dan membersihkan di componentWillUnmount():

Durasi polling adalah keputusan spesifik app. Jika Anda memerlukan real time update dan/atau polling terlalu menekankan back end, pertimbangkan untuk menggunakan WebSockets alih-alih REST.

Berurusan Dengan Fetching Data Jangka Panjang

Terkadang fetching data bisa memakan waktu lama. Dalam hal ini, menampilkan progress bar atau animasi yang mengilap untuk memberi tahu pengguna apa yang terjadi dapat berkontribusi banyak pada pengalaman pengguna. Ini sangat penting ketika pengguna memulai pengambilan data (misalnya dengan mengklik tombol pencarian).

Di aplikasi demo, saya hanya menampilkan pesan bertuliskan "Fetching quotes ..." saat pengambilan sedang berlangsung. Dalam render() metode komponen main Aplikasi, saya menggunakan rendering kondisional dengan memeriksa status state.isFetching.

Metode fetchQuotes() menangani pembaruan state.isFetching dengan menginisialisasi ke true ketika dimulai dan menyetelnya kembali ke false ketika menerima quotes:

Penanganan Error

Saya melakukan sangat minimum penanganan kesalahan/error di sini dengan mencatat kesalahan yang tertangkap ke konsol. Tergantung pada aplikasi Anda, Anda dapat memanggil beberapa retry logic, memberi tahu pengguna, atau menampilkan beberapa konten fallback.

Fetch API vs. Axios

Fetch API memiliki beberapa getchas. Diperlukan langkah ekstra untuk mengekstraksi JSON dari respons. Itu juga tidak menangkap semua kesalahan. Misalnya, 404 akan dikembalikan sebagai respons normal. Anda harus memeriksa kode respons dan juga menangani kesalahan jaringan yang tertangkap.

Jadi Anda harus menghadapi kesalahan di dua tempat. Tetapi Anda dapat menggunakan axios.js library untuk mengatasi masalah ini dan memiliki kode yang sedikit lebih ringkas dengan price menambahkan ketergantungan eksternal. Berikut adalah apa yang tampak seperti kode dengan aksioma:

Ini tidak terlihat seperti banyak, tetapi itu membantu. Kode untuk menambahkan kutipan baru jauh lebih ringkas dengan axios. Berikut ini fetch version:

Dan inilah versi axios:

Kesimpulan

Dalam tutorial ini Anda belajar cara mengambil data secara asinkron dalam aplikasi React. Kita mendiskusikan metode relevant lifecycle methods, polling, progress reporting, and error handling.

Kita melihat dua library promise-based: fetch API dan axios.js. Sekarang, keluarlah dan bangun aplikasi React mengagumkan yang mengakses API jarak jauh.

Selama beberapa tahun terakhir, React semakin populer. Bahkan, kita memiliki sejumlah barang di pasar yang tersedia untuk dibeli, ditinjau, diimplementasikan, dan seterusnya. Jika Anda mencari sumber daya tambahan di sekitar React, jangan ragu untuk memeriksanya.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.