Bước 1: Tạo Axios Instance
Đầu tiên, chúng ta tạo một file axiosInstance.js để tạo một instance của Axios.
import axios from 'axios';
// Tạo instance của Axios với base URL
const axiosInstance = axios.create({
baseURL: 'https://api.example.com',
});
export default axiosInstance;Bước 2: Sử dụng Axios Instance trong một React Component
Sau khi tạo instance của Axios, chúng ta sử dụng nó trong một component React để gửi dữ liệu qua PUT request và xử lý phản hồi.
import React, { useState } from 'react';
import axios from './axiosInstance';
const UpdateDataComponent = () => {
const [formData, setFormData] = useState({ name: '', email: '' });
const [response, setResponse] = useState(null);
const [error, setError] = useState(null);
const handleUpdate = async (event) => {
event.preventDefault();
try {
const result = await axios.put('/update', formData);
setResponse(result.data);
} catch (error) {
setError(error);
}
};
return (
<div>
<form onSubmit={handleUpdate}>
<input
type="text"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
placeholder="Name"
/>
<input
type="email"
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
placeholder="Email"
/>
<button type="submit">Update</button>
</form>
{response && <div>Response: {JSON.stringify(response)}</div>}
{error && <div>Error: {error.message}</div>}
</div>
);
};
export default UpdateDataComponent;Giải thích cấu trúc mã:
- Tạo Axios Instance:
axios.create({ baseURL: 'https://api.example.com' }): Tạo một instance của Axios với URL cơ bản.
- Sử dụng Axios Instance trong Component:
useState: Dùng để quản lý state choformData,response, vàerror.handleUpdate: Hàm xử lý khi form được submit. Nó gửi dữ liệu form bằngaxios.putvà lưu phản hồi vào stateresponse.event.preventDefault(): Ngăn chặn hành động mặc định của form khi submit.return <form>...</form>: Hiển thị form nhập liệu.setFormData: Cập nhật stateformDatakhi người dùng nhập dữ liệu.return <div>Response: {JSON.stringify(response)}</div>: Hiển thị phản hồi từ server.return <div>Error: {error.message}</div>: Hiển thị lỗi nếu có.
