Dưới đây là các bước cụ thể để thiết lập Axios Interceptors trong ứng dụng React:
1. Cài đặt Axios
Trước tiên, bạn cần cài đặt Axios trong dự án React của mình. Bạn có thể sử dụng npm hoặc yarn để cài đặt:
npm install axios
2. Tạo Axios Instance và Cấu Hình
Tạo một file mới, chẳng hạn như api.js, trong thư mục src của dự án. Trong file này, bạn sẽ tạo một instance của Axios và thiết lập các Interceptors.
import axios from 'axios';
const api = axios.create({
baseURL: 'https://api.example.com/api', // URL cơ bản của API
});
// Thêm Request Interceptor để thêm Bearer Token vào header
api.interceptors.request.use(
(config) => {
const token = localStorage.getItem('token'); // Lấy token từ localStorage
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
// Thêm Response Interceptor để xử lý lỗi
api.interceptors.response.use(
(response) => {
return response;
},
(error) => {
if (error.response.status === 401) {
// Xử lý khi gặp lỗi 401 (Unauthorized)
// Ví dụ: điều hướng đến trang đăng nhập
}
return Promise.reject(error);
}
);
export default api;3. Đăng ký các Endpoint API
Bạn có thể thêm các endpoint API vào cùng file api.js để sử dụng trong các component React.
export const getUser = () => {
return api.get('/user');
};
export const deleteUser = (userId) => {
return api.delete(`/user/${userId}`);
};4. Sử dụng Axios Instance trong Component
Trong component React, bạn có thể import các hàm API và sử dụng chúng để thực hiện các yêu cầu HTTP.
import React, { useEffect, useState } from 'react';
import { getUser, deleteUser } from './api';
const UserComponent = () => {
const [user, setUser] = useState(null);
useEffect(() => {
const fetchUser = async () => {
try {
const response = await getUser();
setUser(response.data);
} catch (error) {
console.error('Error fetching user:', error);
}
};
fetchUser();
}, []);
const handleDeleteUser = async () => {
try {
await deleteUser(user.id);
console.log('User deleted successfully.');
} catch (error) {
console.error('Error deleting user:', error);
}
};
return (
<div>
{user && (
<>
<h2>{user.name}</h2>
<button onClick={handleDeleteUser}>Delete User</button>
</>
)}
</div>
);
};
export default UserComponent;
