Data Fetching

Axios adalah sebuah library open source yang dapat digunakan untuk melakukan HTTP request ke server. Untuk menginstall axios, ketik npm install axios. Pada function components, axios akan digabungkan dengan useEffect atau handler untuk melakukan fetch data.

Mengimport axios di program React.js
Buka App.js di folder src project simple-bank.
Ketikkan import axios from ‘axios’ untuk mengimport axios ke App.js

import React from 'react';
import axios from 'axios’;
function App() {
return (
<div className="App">
<h1>Hello World</h1>
</div>
);
}
export default App;

GET Request dengan Axios
GET request menggunakan axios dapat dilakukan dengan cara sebagai berikut.

axios.get(‘http://example.com/’)
.then(response => console.log(response))
.catch(error => console.log(error))

Axios akan melakukan HTTP request ke http://example.com/. Apabila berhasil, response dari server akan di-log di console. Apabila gagal, error akan di-log di console.

Penerapan di React
import React, {useEffect} from 'react';
import axios from 'axios’;
function App() {
useEffect(() => {
axios.get('http://example.com/')
.then(response => console.log(response))
.catch(error => console.log(error))
}, [])
. . .
}
export default App;

Fungsi pada parameter sideEffect akan dijalankan saat component App dirender di browser. Sehingga, request GET dari axios akan dilakukan setiap component App dirender.

POST Request dengan Axios
POST request menggunakan axios dapat dilakukan dengan cara sebagai berikut.

axios.post(‘http://example.com/’, {name: ‘John’, age: 31})
.then(response => console.log(response))
.catch(error => console.log(error))

Axios akan melakukan HTTP request ke http://example.com/. Saat melakukan POST request, kita harus memasukkan data berupa JSON sebagai parameter kedua. Apabila berhasil, response dari server akan di-log di console. Apabila gagal, error akan di-log di console.

Penerapan di React
function App() {
const postData = () => {
axios.post('http://example.com', {name: 'John', age: 31})
.then(response => console.log(response))
.catch(error => console.log(error))
}
return (
<div className="App">
<button onClick={this.postData}>Post Data</button>
</div>
);
}

Fungsi postData akan dijalankan saat button Post Data diklik.

PUT Request dengan Axios
PUT request menggunakan axios dapat dilakukan dengan cara sebagai berikut.

axios.put(‘http://example.com/1’, {name: ‘John’, age: 31})
.then(response => console.log(response))
.catch(error => console.log(error))

Axios akan melakukan HTTP request ke http://example.com/. Saat melakukan PUT request, kita harus memasukkan data berupa JSON sebagai parameter kedua. Biasanya, di API URL terdapat indicator berupa id data. Apabila berhasil, response dari server akan di-log di console. Apabila gagal, error akan di-log di console.

Penerapan di React
function App() {
const putData = () => {
axios.put('http://example.com/1', {name: 'John', age: 31})
.then(response => console.log(response))
.catch(error => console.log(error))
}
render() {
return (
<div className="App">
<button onClick={this.putData}>Put Data</button>
</div>
);
}
}

Fungsi putData akan dijalankan saat button Put Data diklik.

DELETE Request dengan Axios
POST request menggunakan axios dapat dilakukan dengan cara sebagai berikut.

axios.delete(‘http://example.com/1’)
.then(response => console.log(response))
.catch(error => console.log(error))

Axios akan melakukan HTTP request ke http://example.com/. Saat melakukan DELETE request, biasanya di API URL terdapat indicator berupa id data. Apabila berhasil, response dari server akan di-log di console. Apabila gagal, error akan di-log di console.

Penerapan di React
function App() {
deleteData = () => {
axios.delete('http://example.com/1’)
.then(response => console.log(response))
.catch(error => console.log(error))
}
render() {
return (
<div className="App">
<button onClick={this.deleteData}>Delete Data</button>
</div>
);
}
}

Fungsi deleteData akan dijalankan saat button Delete Data diklik.