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.all trong React Component
Sau khi tạo instance của Axios, chúng ta sử dụng nó trong một component React để thực hiện nhiều yêu cầu HTTP đồng thời và xử lý kết quả trả về.
import React, { useEffect, useState } from 'react';
import axios from './axiosInstance';
const MultipleGetRequestsComponent = () => {
const [data1, setData1] = useState(null);
const [data2, setData2] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const [response1, response2] = await axios.all([
axios.get('/endpoint1'),
axios.get('/endpoint2'),
]);
setData1(response1.data);
setData2(response2.data);
} catch (error) {
setError(error);
}
};
fetchData();
}, []);
if (error) return <div>Error: {error.message}</div>;
if (!data1 || !data2) return <div>Loading...</div>;
return (
<div>
<h1>Data from Endpoint 1:</h1>
<pre>{JSON.stringify(data1, null, 2)}</pre>
<h1>Data from Endpoint 2:</h1>
<pre>{JSON.stringify(data2, null, 2)}</pre>
</div>
);
};
export default MultipleGetRequestsComponent;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:
useEffect: Dùng để thực hiện hàmfetchDatangay khi component được render.axios.all([axios.get('/endpoint1'), axios.get('/endpoint2')]): Thực hiện nhiều yêu cầu GET đồng thời.setData1(response1.data): Lưu dữ liệu trả về từ yêu cầu thứ nhất vào statedata1.setData2(response2.data): Lưu dữ liệu trả về từ yêu cầu thứ hai vào statedata2.return <h1>Data from Endpoint 1:</h1><pre>...</pre>: Hiển thị dữ liệu từ yêu cầu thứ nhất.return <h1>Data from Endpoint 2:</h1><pre>...</pre>: Hiển thị dữ liệu từ yêu cầu thứ hai.return <div>Error: {error.message}</div>: Hiển thị lỗi nếu có.
