使用 Axios 在 React 和 Vite 中实现前后端交互
如果你是一个刚入行的小白，想要学习如何在 React 应用中与后端进行通信，使用 Axios 是一种不错的选择。接下来，我将详细介绍如何使用 React 和 Vite 创建一个简单的应用，并利用 Axios 进行 API 请求。
流程步骤
下面是整个实现过程的流程表：
| 步骤 | 描述 |
|---|---|
| 1 | 创建 React 应用 |
| 2 | 安装 Axios |
| 3 | 创建 API 请求 |
| 4 | 在组件中使用 Axios |
| 5 | 处理响应并展示数据 |
每一步的详细实现
1. 创建 React 应用
使用 Vite 创建一个新的 React 项目。
打开终端，输入以下命令：
npm create vite@latest my-react-app --template react
这条命令会创建一个名为 my-react-app 的新 React 项目。
2. 安装 Axios
在项目目录中安装 Axios。执行：
cd my-react-app
npm install axios
这条命令会将 Axios 安装到你的项目中，以便用于发送 HTTP 请求。
3. 创建 API 请求
在 src 目录中创建一个 api.js 文件，用于处理 API 请求。
// src/api.js
import axios from 'axios';
// 创建一个 API 实例
const api = axios.create({
baseURL: ' // 替换为你的 API 基础 URL
timeout: 10000 // 设置请求超时时间为 10 秒
});
// 导出 API 实例
export default api;
以上代码创建了一个 Axios 实例，并设置了基础 URL 和超时时间。
4. 在组件中使用 Axios
接下来，我们将在组件中使用这个 API 实例。打开 src/App.jsx 文件，并添加以下代码：
// src/App.jsx
import React, { useEffect, useState } from 'react';
import api from './api'; // 导入刚刚创建的 API 实例
function App() {
const [data, setData] = useState([]); // 用于存储 API 数据
const [loading, setLoading] = useState(true); // 用于加载状态
// 发送 GET 请求以获取数据
useEffect(() => {
const fetchData = async () => {
try {
const response = await api.get('/data'); // 替换为你的 API 路径
setData(response.data); // 将响应数据存入 state
} catch (error) {
console.error('获取数据失败', error); // 错误处理
} finally {
setLoading(false); // 加载完毕
}
};
fetchData();
}, []); // 依赖项为空数组，确保只在组件挂载时执行一次
if (loading) {
return <div>Loading...</div>; // 加载状态提示
}
return (
<div>
数据列表
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li> // 遍历并展示数据
))}
</ul>
</div>
);
}
export default App;
在这个组件中，我们使用 useEffect 来发送 GET 请求。当组件加载时，数据将被获取并存储到 data 状态中。
5. 处理响应并展示数据
在组件中，我们处理加载状态，并在加载完成后展示获取的数据。如果数据获取失败，将在控制台输出错误信息。
结尾
至此，你已经成功搭建了一个使用 Axios 进行前后端交互的基本 React 应用。你可以根据自己的需求进一步扩展和修改 API 请请求和数据处理逻辑。
journey
title 前后端交互流程
section 创建 React 应用
创建项目 : 5: 创建 React 应用
section 安装 Axios
安装 Axios : 4: 安装 Axios
section 创建 API 请求
创建 api.js : 3: 创建 API 请求
section 在组件中使用 Axios
使用 Axios 发送请求 : 5: 在组件中使用 Axios
section 处理响应
展示数据 : 5: 处理响应并展示数据
希望这篇文章能帮助你快速上手前后端交互的开发过程！如果你有任何疑问，欢迎随时提问。
