Tutorial Belajar Reactjs #9: Get data API menggunakan Fetch dan Axios Pada React js
Tutorial Belajar Reactjs #9: Get data API menggunakan Fecth dan Axios Pada React js,
Materi tutorial kali ini merupakan materi lanjutan dari tutorial kita sebelum nya tentang, Tutorial Belajar Reactjs #8: Map dan Filter Array Pada React js. pada tutorial sebelumnya kita telah mempelajari bagai mana cara menggunakan map, filter dan state, untuk menggolah data dari object array json.
maka pada tutorial kali ini kita coba untuk menggunakan fungsi fetch(0 dan menggkombinasikan nya dengan props. untuk artikel tentang props ini bisa di lihat pada blog ini pada link berikut.
Mengenal apa Itu Props pada react js
yang mana props ini akan kita gunakan untuk memprasing paramater data ke dalam component yang akan menamplikan data dari hasil requestnya
Apa Itu fetch dan Axios..?
fetch adalah sebuah fungsi yang berguna untuk menggambil atau merequest ke protocol HTTP yang mana hasil dari reques ini berupa resource , object atau data. dengan paramater pertamanya ada url dari resource data yang akan kita ambil.
Axios adalah sebuah library open source yang berfungsi untuk lekakukan request dang menggambil data sama halnya dengan fetch. library ini paling banyak digunakan sekarang ini karna di nilai lebih simpel dalam penggunaan dan pengimplementasian nya.
untuk memperjelas penggunaan dari fungsi fetch ini langsung saja kita mempraktekan nya. buka kembali project pada tutorial sebelumnya. dan buat lah datu folder untuk menyimpan file yang nantinya akan kita gunakan untuk.
1.Buka project sebelumnya
pastikan project sebelumnya masih berjalan dengan sempurna tanpa ada error dari program nya, lalu buat sebuha folder baru dan tambahkan 1 file baru, Note (Untuk penaaman file dan folder bebas)
|
| Buat folder dan file baru |
untuk API nya disini kita menggunakan API dari jsonplaceholder link website resminya : https://jsonplaceholder.typicode.com/,
atau kalian juga bisa menggunakan API dari penyedia API lain. karna saat ini kita hanya fokus ke Get data, maka kita bisa menggunakan data dari jsonplaceholder ini untuk latihan, dan di next tutorial mungkin kita akan bahas dengan menggunakan API local yang akan kita buat sendiri.lalu dalam file api_fecth tuliskan koding di bawah ini.
File api_fetch.js
import React, { Component } from 'react'
const urlAPI = 'https://jsonplaceholder.typicode.com/posts';
class api_fetch extends Component {
constructor(props) {
super(props);
this.state = {
arrypost: []
}
}
//Life Circle Component react
componentDidMount() {
this.GetDataAPi()
}
GetDataAPi() {
fetch(urlAPI).then(res => {
if (res.status === 200)
return res.json()
}).then(resdata => {
console.log(resdata)
this.setState({
arrypost: resdata
})
})
}
render() {
return (
<div className="container">
fatch data from Api JsonPlaceHolder
</div>
)
}
}
export default api_fetch;
- pada line 14-16 ini merupakan fugsi life circle sebuah component
- pada line 20-29, kita mmebuat sebuah fungsi untuk get data dengan menggunakan fecth
- pada line 24, untuk mengecek data response nya ke console log
- pada line 25-27 , menerima data dan menampung nya di state
dan jangan lupa daftarkan ke routing atau import file api_fetch nya ke App.js, dan tambahkan menu baru lagi untuk menuju page yang nantinya akan menalpikan component api_fetch nya.
|
|
daftarkan ke Route app.js |
|
| Tambahkan ke menu |
lalu save dan jalan kan program nya. dan inspect element, lalu jika berhasil maka pada bagian consol akan menampilkan data yang kita reques dari API jsonplaceholder nya
|
| Hasil runiing program dan show console log |
jika hasil nya sperti gambar diatas maka kita berhasil merequest data dari jsonpalceholder nya, dapat di lihat pada console log nya, data yang kita requedt berjumlah 100 data,
lalu kita akan comba menampilkan data hasil dari request ini dengan fungsi map yang telah kita bahas pada tutorial sebelumnya. selanjut nya buat sebuah component baru untuk menalpilkan data dari hasil request .
2. Buat component Baru
untuk menpilkan data yang behrasil kita get dari API kita perlu membuat sebuah componet baru, buat sebuah folder dalam folder component, agar struktur folder lebih rapi, buat 2 buah file dalam folder baru tersebut.
Notes: karna hasil data yang kita request dari jsonplaceholder tidak memiliki data gambar, maka kita perlu nyiapkan satu gambar , agar component yang kita map nantinya terlihat lebih rapi.
|
| Component card_post |
lalu tuliskan kode berikut ini.
card_post.js
import React, { Component } from 'react'
import img from './imgpost.png'
import './cardstyle.css'
class cardpost extends Component {
render() {
return (
<div>
<div className="column">
<div className="card">
<img src={img} />
<div className="card-title">
<h4>{this.props.title}</h4>
</div>
<div className="card-conten">
{this.props.conten}
</div>
</div>
</div>
</div>
)
}
}
export default cardpost;
- Pada line 14 dan 17 diatas, kita menggimplementasi kan props. yang mana parameter props ini akan di isi data dari API yang berhasil kita get
untuk style dari card_posnya agar terlihat rapi masukan code css berikut ini,
cardstyle.css
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 5px;
}
/* Remove extra left and right margins, due to padding */
.row {
margin: 0 -5px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
width: 350px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
text-align: center;
background-color: #ffff;
}
.card,
img {
overflow: hidden;
width: 250px;
}
.card-title {
padding: 5px;
text-align: left;
height: 50px;
overflow: hidden;
}
.card-conten {
padding: 5px;
height: 50px;
text-align: left;
overflow: hidden;
}
lalu import component ini kedalam api_fetch.js, lalu panggil component card_post nya dan hasilnya akan menjadi seperti gambar berikut ini.
|
|
Import component card_post |
lalu jalakan cembali program nya dan hasilnya akan menjadi sepeti gambar berikut.
|
| component card_post |
sampai disini kita berhasil mengimport component card-post nya, dan component ini lah yang nantinya kita gunakan untuk meampilkan data dari hasil get API yang sebelumnya telah kita tampung pada state di component api_fetch.js, lalu yang kita map() adalah state nya,
Map state
render() {
return (
<div className="container">
fatch data from Api JsonPlaceHolder
{
this.state.arrypost.map(function (data) {
return <CardPost key={data.id} title={data.title} conten={data.body} />
})
}
</div>
)
}
sehingga keseluhran isi dari file api_fetch seperti beriku ini.
Notes: pada line 7 ada sedikit penembahan props, pada component card_post nya, props key ini, karna aturan dari javascript itu sendiri untuk setiap elemnt yang di looping harus memiliki unique id, maka kita bisa menggunakan data id dari hasil Get dari yang kita peroleh dari jsonpalcehilder nya.
api_fetch.js
import React, { Component } from 'react'
import CardPost from '../../../component/card_post/cardpost'
const urlAPI = 'https://jsonplaceholder.typicode.com/posts';
class api_fetch extends Component {
constructor(props) {
super(props);
this.state = {
arrypost: []
}
}
componentDidMount() {
this.GetDataAPi()
//this.GetDataByAxios()
}
GetDataAPi() {
fetch(urlAPI).then(res => {
if (res.status === 200)
return res.json()
}).then(resdata => {
console.log(resdata)
this.setState({
arrypost: resdata
})
})
}
render() {
return (
<div className="container">
fatch data from Api JsonPlaceHolder
{
this.state.arrypost.map(function (data) {
return <CardPost key={data.id} title={data.title} conten={data.body} />
})
}
</div>
)
}
}
export default api_fetch;
lalu save dan jalan kembali program nya, jika berhasil maka akan menjadi seperti gambar berikut ini.
|
| hasil runing program Get data API dengan fetch |
sekerang kita telah berhasil menpilkan atau menggget data dari API
dengan menggunakan fungsi fetch, selanjut nya kita akan mencoba menggunakan
axios untu merequest data ke API nya.
3. Instalasi Axios pada project
karna axios ini merupakan sebuah library, jadi kita perlu mengginstal atau meng-add library axios nya pada project kita, sebelum instalasi axios pastikan kita terkoneksi dengan internet, karan kita akan menggunduh library dari axios nya secara online.
instalasi axios
buka CMD dan pastikan patch nya telah berada pada directory project kita, lalu ketikan perintah berikut ini
nmp i axios
lalu tekan enter, jika berhasil maka akan seperti gambar brikut ini
|
| instalasi axios |
karna axios sebuah library kita juga perlu import axios nya ke file api_fetch.js , selanjutnya baut sebuah fungsi baru agar kita dapat membandingak perbedaan menggunakan fetch dan axios untuk get data dari API nya.
Notes: sebelum menjalakan program menggunakan Axios , stop runing programnya dan start kembali program nya agar library dari axios nya ter load dengan sempuran.
|
| import Axios |
fungsi Get data API dengan menggunakan axios
componentDidMount() {
//this.GetDataAPi()
this.GetDataByAxios()
}
GetDataByAxios() {
axios.get(urlAPI)
.then((res) => {
this.setState({
arrypost: res.data
})
console.log(res.data)
})
}
agar tidak terjadi conflict kita perlu mark fungsi Get data API yang menggunakan fungsi fetch pada componentDidmountnya, sperti gambar diatas.
dan keselurahan. file dari api_fetch.js kita sekarang menjadi seperti berikut ini.
api_fetch.js
import React, { Component } from 'react'
import CardPost from '../../../component/card_post/cardpost'
import axios from 'axios';
const urlAPI = 'https://jsonplaceholder.typicode.com/posts';
class api_fetch extends Component {
constructor(props) {
super(props);
this.state = {
arrypost: []
}
}
componentDidMount() {
// this.GetDataAPi()
this.GetDataByAxios()
}
GetDataByAxios() {
axios.get(urlAPI)
.then((res) => {
this.setState({
arrypost: res.data
})
console.log(res.data)
})
}
GetDataAPi() {
fetch(urlAPI).then(res => {
if (res.status === 200)
return res.json()
}).then(resdata => {
console.log(resdata)
this.setState({
arrypost: resdata
})
})
}
render() {
return (
<div className="container">
fatch data from Api JsonPlaceHolder
{
this.state.arrypost.map(function (data) {
return <CardPost key={data.id} title={data.title} conten={data.body} />
})
}
</div>
)
}
}
export default api_fetch;
selanjut nya save dan jalakan ulang program nya, jika berhasil maka tampilan nya seprti gambar berikut
|
memang tidak ada perubahan dari hasil running program nya, akan tetapi kita
dapat melihat perbedaan dari segi pebulisan fungsi get data API nya anatara
menggunakan axios dan fetch.
pada materi tutorial kali ini kita telah berhasil melakukan Get data dari API dengan menggunakan fact dan Axios
untuk lebih memahahami lagi tentang react js, bisa lanjut ke Tutorial Part #10.
Part#10 : Cooming Soon
Sekian Dan Terima kasih...
#Happy Coding
- Belajar ReactJs
- Tutorial ReactJs
- Cara memberi style pada component react js
- Berpindah Halaman pada react js
- cara buat menu Navigasi pada react js
- Cara memisahkan component pada react js
- Menampilkan data pada react js
- Filter data di react js
- map dan filter json pada react js
- Get data API dengan fetch di react js
- Get data API dengan Axios di react js
0 Response to "Tutorial Belajar Reactjs #9: Get data API menggunakan Fetch dan Axios Pada React js"
Posting Komentar