3 Cara Fetch Data di ReactJs

gambar ini dibuat menggunakan Canva.com

Catatan : Tulisan Ini Tentang Fetch yang di implementasikan pada ReactJS

Fetch API

Fetch merupakan (API) atau fungsi dasar untuk meminta sumber daya melalui jaringan, Secara dasar berhubungan dengan request & response (permintaan/tanggapan) yang dapat digunakan hampir di semua jenis browser.

Dukungan untuk fetch pada browser dapat dilihat pada situs Caniuse.com, Pada situs tersebut tercatat fetch tidak support pada operamini, Namun setelah mencoba menggunakan Operamini , Saya mendapatkan hasil seperti ini.

Can I use… Support tables for HTML5, CSS3, etc

Okay, Kita skip saja mengenai browser support, Intinya manual test terhadap browser sangat penting yah, Selain mencari referensi pada situs seperti Caniuse.com.

Pada tulisan saya ini, Saya menggunakan CRA (Create-React-App) maklum untuk para pemula seperti saya,

$ # example command for start new project ReactJS
$ create-react-app 3waytofetch 
Creating a new React app in /home/user/3waytofetch.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

Dan menggunakan ReactJS dengan Versi 16.3.2

$ cd 3waytofetch 
$ cat package.json
{
  "name": "3waytofetch",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Berikut ada 3 cara bagaimana menggunakan fetch pada ReactJS, Yang pertama saya menyebutnya dengan istilah “Normal Fetch” yang dimana saat pertama kali mempelajari ReactJS, Saya menggunakan cara implementasi seperti itu, Dan banyak ditemukan pada pembahasan seputar ReactJS di Internet.

1. Normal Fetch

normal & mostly use

Pada Class App (default CRA) saya mendefinisikan sebuah State dengan nama “data” yang diberi nilai Array [].

state = {
    data : []
}

Kemudian, menambahkan lifecycle componentDidMount yang dimana setiap fungsi atau perintah yang di tuliskan pada method atau function tersebut dijalankan setelah Component telah selesai melakukan render DOM.

componentDidMount(){
   const urlFetch = fetch('alamaturl')
   urlFetch.then( res => {
      if(res.status === 200)
         return res.json()   
   }).then( resJson => {
      this.setState({
          data: resJson
      })
   })
}

• const urlFetch : Definisi konstanta urlFetch yang di beri nilai Fetch berserta parameter berupa String untuk alamat url yang akan kita Request data. Kembalian nilai dari fungsi Fetch yakni berupa Object Promise, Object Promise memiliki 3 State yakni Pending, Fulfilled, & Reject. keadaan pertama yakni Pending, didalam keadaan ini akan berubah menjadi salah satu dari Fulfilled atau Reject, Fulfilled ketika Permintaan Fetch berhasil dan berjalan tanpa masalah, Reject ketika Permintaan gagal (Penyebab yang umum yakni CORS). Finally, nilai yang di kembalikan yakni berupa promise juga, yang miliki 2 method promise.then dan promise.catch.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#Description

• urlFetch.then : Pada method then, Menge-check apakah status request dengan nilai 200 , jika benar maka mengembalikan nilai berupa res.json() kemudian memanggil kembali method then untuk mengambil nilai kembalian yang telah di dapatkan dan mengatur kembali state.data dengan fungsi this.setState dengan nilai JSON (resJson).

Berikut kehidupan yang terjadi jika mengikuti contoh kode diatas (hehehhe).

atau boleh lihat kode fullnya disini

ri7nz/3waytofetch

2. Async/Await Fetch

Cara ke-2 dengan memanfaatkan Async/Await, Pada cara ini sebaiknya memahami Promise yang telah di tuliskan pada cara pertama agar dapat memahami bagaimana proses kerja Async Function dan Await.

• Async Function : Membuat Object asynchronous Function , Dengan menambahkan kata async saat mendefinisikan sebuah function.
• Await : Untuk menunda statement atau pengerjaan di sebuah Async Function sampai object Promise selesai. (Await Promise)

const FungsiAsync = async () => {
   const urlFetch = await fetch('url'} # fetch is Promise object
   # fetch kembaliannya dalam bentuk promise , maka
   # baris code setelah await fetch akan di kerjakan sampai promise
   # atau fungsi fetch tersebut selesai.
   # jika telah selesai , maka lanjut pada statement return dibawah
   # ini.
   # return jika 'json' in urlFetch benar maka
   # return await urlFetch.json() , jika false maka
   # return Array []
   return 'json' in urlFetch ? await urlFetch.json() : []
   # mengapa await urlFetch.json() ? 
   # urlFetch.json masih bernilai Object Promise , dengan 
   # menambahkan await maka kita akan resolve dan 
   # mendapatkan nilai JSON 
}

untuk full code seperti screenshot di bawah ini.

ri7nz/3waytofetch

kehidupan yang terjadi di Cara ke-2.

3. Export/Import Your Ways

Terakhir bagaimana membuat AsyncFetch tersebut dapat digunakan ulang tanpa perlu menuliskan kembali fungsi tersebut di setiap Component yang ingin menggunakan.

Pertama kali, Buat sebuah File , Kita beri nama “AsyncFetch.js” pada folder src, Berikut code pada file tersebut.

const AsyncFetch = async (url) => {
    const urlFetch = await fetch(url)
    return urlFetch.status === 200 && 'json' in urlFetch ? 
        await urlFetch.json() : [] 
}
export default AsyncFetch

• const AsyncFetch : fungsi yang digunakan dan di jelaskan pada cara ke 2 diatas.
• export default AsyncFetch: degan menambahkan Keyword export default maka fungsi tersebut secara langsung digunakan ketika component atau module tersebut di import di component atau module lainnya.

Kemudian save dan kembali ke App.js , untuk menggunakan AsyncFetch.js,

• Import dulu module AsyncFetch.
• Pada async componentDidMount, langsung saja setStateAsync dengan key data pada state di beri nilai await AsyncFetch(url) dan mendapatkan nilai JSON dari URL yang di Request.

...
import AsyncFetch from './AsyncFetch'
...
  async componentDidMount(){
    const url = "your url"
    this.setStateAsync({
        data: await AsyncFetch(url)
    }) 
  }

berikut contoh pada screenshot dibawah ini.

Bonus

Pada cara ke-3 diatas saya menambahkan juga bagaimana memanfaatkan AsyncFetch pada Component Lain dan request ke Reddit, Lebih jelasnya dapat dilihat pada repository di bawah.

Direpository berikut terdapat 3 branch masing-masing sesuai 3 cara diatas , silahkan Dicoba CMIIW.

Next! Bagaimana membuat HOC dan Code Splitting dengan memanfaatkan Async/Await yang memiliki banyak manfaat Load/Import component yang dipanggil ketika ingin digunakan 👍

ri7nz/3waytofetch

Kesimpulan

Fetch API digunakan untuk melakukan request Sumber Daya (xhr) atau resource ke Server. Async/Await merupakan sebuah fungsi yang sangat membantu dalam menangani/meng-Handle object Promise khususnya pada nilai atau object yang di kembalikan oleh fetch yang membawa hasil response dari server.

Tulisan ini tak luput dari banyak kesalahan yang murni dari saya, Mohon Maaf sebelumnya — Happy Coding.

Terima kasih juga untuk:

• https://web.telegram.org/#/im?p=@wwwid_pwa
• https://medium.com/wwwid
• https://www.facebook.com/JakartaJS/
• https://web.telegram.org/#/im?p=@react_id
• https://fb.me/groups/DevCJakarta
• https://web.telegram.org/#/im?p=s1254672281_10277979659395653064
• Riza Fahmi (Materi Async/Await pada #39 Meetup JakartaJS di kumparan)