Trong ví dụ này, chúng ta sẽ thay đổi header của mỗi yêu cầu HTTP để thêm một API key hoặc một mã token trước khi gửi đi.
Bước 1: Tạo một instance của Axios với Interceptor
Đầu tiên, chúng ta tạo một file axiosInstance.js để tạo một instance của Axios và thêm Interceptor cho các yêu cầu.
import axios from 'axios';
// Tạo instance của Axios với base URL
const axiosInstance = axios.create({
baseURL: 'https://api.example.com',
});
// Thêm Interceptor cho các yêu cầu
axiosInstance.interceptors.request.use(
(config) => {
// Thay đổi header của request trước khi gửi đi
const apiKey = 'your-api-key-here'; // Thay thế bằng API key của bạn
config.headers['X-API-KEY'] = apiKey;
// Ví dụ: Thêm mã token từ localStorage nếu có
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
export default axiosInstance;Bước 2: Sử dụng Axios Instance trong một React Component
Sau khi tạo instance của Axios với Interceptor, bạn có thể sử dụng nó trong các component React để thực hiện các yêu cầu HTTP.
import React, { useEffect, useState } from 'react';
import axios from './axiosInstance';
const FetchDataWithCustomHeader = () => {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get('/data-endpoint');
setData(response.data);
} catch (error) {
setError(error);
}
};
fetchData();
}, []);
if (error) return <div>Error: {error.message}</div>;
if (!data) return <div>Loading...</div>;
return (
<div>
<h1>Data with Custom Header:</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
};
export default FetchDataWithCustomHeader;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.axiosInstance.interceptors.request.use: Thêm Interceptor cho các yêu cầu.config.headers['X-API-KEY'] = apiKey: Thêm API key vào header của yêu cầu.config.headers.Authorization = 'Bearer ' + token: Thêm mã token vào header của yêu cầu (nếu có).
- Sử dụng Axios Instance trong Component:
useEffect: Dùng để thực hiện hàmfetchDatangay khi component được render.axios.get('/data-endpoint'): Thực hiện yêu cầu GET tới endpoint/data-endpointvới các header đã được thêm vào.setData(response.data): Lưu dữ liệu trả về vào statedata.setError(error): Lưu lỗi nếu có xảy ra.return <div>Data with Custom Header:</div>: Hiển thị dữ liệu khi đã tải xong.
