Cara Penggunaan Axios di ReactJS
Pendahuluan
Axios adalah pustaka populer untuk melakukan HTTP request seperti GET, POST, PUT, DELETE, dan lainnya. Axios sangat cocok digunakan di aplikasi React karena menyediakan sintaks yang mudah dan mendukung Promise. Artikel ini akan membahas cara menggunakan Axios di aplikasi ReactJS.
Instalasi Axios
Pastikan Anda telah menginstal Axios di proyek React:
npm install axios
Menggunakan Axios di Komponen React
Misalnya, kita ingin mengambil data dari sebuah API menggunakan metode GET dan menampilkannya di komponen React.
- GET Request:
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const App = () => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
setData(response.data);
setLoading(false);
} catch (error) {
setError(error);
setLoading(false);
}
};
fetchData();
}, []);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<div>
<h1>Posts</h1>
<ul>
{data.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
};
export default App;
Penjelasan:
- Gunakan useEffect untuk memanggil fungsi fetchData saat komponen pertama kali dimuat.
- axios.get digunakan untuk mengambil data dari URL API.
- State data, loading, dan error digunakan untuk menyimpan data yang diambil, status pemuatan, dan kesalahan.
- POST Request: Untuk mengirim data ke server, Anda bisa menggunakan metode POST seperti berikut:
import React, { useState } from 'react';
import axios from 'axios';
const App = () => {
const [title, setTitle] = useState('');
const [body, setBody] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
title,
body,
});
console.log('Response:', response.data);
alert('Post successfully created!');
} catch (error) {
console.error('Error posting data:', error);
}
};
return (
<div>
<h1>Create a Post</h1>
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
<textarea
placeholder="Body"
value={body}
onChange={(e) => setBody(e.target.value)}
></textarea>
<button type="submit">Submit</button>
</form>
</div>
);
};
export default App;
Penjelasan:
- Metode axios.post digunakan untuk mengirim data title dan body ke API.
- Fungsi handleSubmit menangani form submission dan mengirimkan data ke server.
Top comments (0)