Yang Dimaksud Dengan Fetch Data Mengambil Data Adalah

Yang Dimaksud Dengan Fetch Data Mengambil Data Adalah

3 Cara Fetch Data di ReactJs

gambar ini dibuat memperalat

***Canva.com***

Karangan : Tulisan Ini Akan halnya Fetch yang di implementasikan pada ReactJS

Fetch
ialah (Jago merah) atau fungsi dasar buat meminta sumber siasat melampaui jaringan, Secara dasar berhubungan dengan
request
&
response
(permintaan/tanggapan) yang bisa digunakan hampir di semua jenis
browser.

Dukungan buat
fetch
pada
browser
dapat dilihat pada situs C
aniuse.com
, Lega situs tersebut tercatat
fetch
tidak
support
pada
operamini, Namun setelah mencoba menggunakan
Operamini
, Saya mendapatkan hasil seperti ini.

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

Pada tulisan saya ini, Saya menggunakan CRA (Create-React-App) maklum cak bagi para pemula begitu juga saya,

        $ # example command for mulai 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-basilika, and react-scripts...

Dan menggunakan ReactJS dengan Versi
16.3.2

        $ cd 3waytofetch
          
$ pencelup 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
puas ReactJS, Yang pertama saya menyebutnya dengan istilah
“Sah Fetch”
yang dimana saat purwa kali mempelajari ReactJS, Saya menunggangi mandu implementasi serupa itu, Dan banyak ditemukan lega pembahasan seputar ReactJS di Internet.

1. Normal Fetch

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

        state = {

          data : []
}

Kemudian, menambahkan
lifecycle
componentDidMount
nan dimana setiap fungsi ataupun perintah yang di tuliskan pada
method

atau
function
tersebut dijalankan pasca-
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 biji

Fetch
berserta parameter berupa String buat mangsa url yang akan kita Request data. Kembalian angka dari kepentingan

Fetch

yakni berupa

Object Promise
,

Object Promise

memiliki 3
State
merupakan

Pending
,

Fulfilled
, &

Reject
. kejadian pertama adalah

Pending
, didalam keadaan ini akan berubah menjadi keseleo suatu dari

Fulfilled

atau

Reject
,

Fulfilled

ketika Petisi

Fetch

berakibat dan berjalan tanpa masalah,

Reject

ketika Permintaan gagal (Penyebab nan umum yakni

CORS
).

Finally,
nilai yang di kembalikan yakni berupa

promise

juga, nan miliki 2

method promise.then
dan

promise.catch.

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

urlFetch.then :
Plong

method

then
, Menge-check apakah
status request
dengan nilai

200

, jika benar maka membandingbanding kredit riil
res.json()
kemudian memanggil kembali

method

then

untuk mengambil nilai kembalian yang mutakadim di dapatkan dan mengatur lagi
state.data
dengan faedah
this.setState
dengan ponten
JSON
(resJson).

Read: Cara Menukarkan Bitcoin Dengan Rupiah

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

atau boleh tatap kode fullnya disini

2. Async/Await Fetch

Cara ke-2 dengan memanfaatkan

Async/Await
, Pada cara ini sebaiknya mencerna

Promise

yang mutakadim di tuliskan pada cara mula-mula agar bisa memahami bagaimana proses kerja

Async Function

dan

Await
.

Async Function
: Membuat

Object asynchronous Function

, Dengan menambahkan kata

async

detik 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 kerumahtanggaan rancangan promise , maka

          # baris code sehabis await fetch akan di kerjakan sampai promise

          # atau kebaikan 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() : []

          # cak kenapa await urlFetch.json() ?
          

          # urlFetch.json masih bernilai Object Promise , dengan
          

          # menambahkan await maka kita akan resolve dan
          

          # mendapatkan angka JSON
          
}

cak bagi full code seperti screenshot di bawah ini.

3. Export/Import Your Ways

Terakhir bagaimana membuat
AsyncFetch
tersebut bisa digunakan ulang minus perlu menuliskan kembali fungsi tersebut di setiap
Component
yang ingin menunggangi.

Permulaan kali, Lakukan sebuah

File
, Kita beri label “AsyncFetch.js” puas 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 kontan digunakan ketika component atau module tersebut di import di component alias module lainnya.

Read: Cara Mengatasi Aplikasi Tidak Bisa Dibuka Di Windows 7

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

Import

dulu

module

AsyncFetch.
Pada

async

componentDidMount
, berbarengan saja

setStateAsync

dengan

key

data pada

state

di pasrah ponten
await AsyncFetch(url)
dan mendapatkan nilai

JSON

berasal

URL

yang di
Request.

        ...
import AsyncFetch from './AsyncFetch'
...

          async componentDidMount(){

          const url = "your url"

          this.setStateAsync({

          data: await AsyncFetch(url)

          })
          

          }

berikut kamil plong screenshot dibawah ini.

Bonus

Puas cara ke-3 diatas saya menambahkan juga bagaimana memanfaatkan
AsyncFetch
pada
Component
Tak dan
request
ke

Reddit
, Lebih jelasnya bisa dilihat plong repository di bawah.

Direpository berikut terwalak 3 branch per 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 👍

Konklusi

Fetch Jago merah
digunakan bikin melakukan

request

Mata air Daya (xhr) alias

resource

ke

Server
. Async/Await merupakan sebuah guna yang suntuk kondusif n domestik menangani/meng-Handle

object Promise

khususnya sreg nilai alias

object

yang di kembalikan oleh

fetch

yang mengangkut hasil
response
mulai sejak
server.

Gubahan ini bukan luput dari banyak kesalahan yang murni bermula saya, Harap Maaf sebelumnya — Happy Coding.

Syukur lagi buat:

https://web.telegram.org/#/im?p=@wwwid_pwa
https://medium.com/wwwid
https://www.facebook.com/JakartaJS/
https://web.kawat.org/#/im?p=@react_id
https://fb.berpenyakitan/groups/DevCJakarta
https://web.telegram.org/#/im?p=s1254672281_10277979659395653064
Riza Fahmi (Materi Async/Await lega #39 Meetup JakartaJS di kili-kili)