前置知识：HTTP 请求与 Axios 基础
1. HTTP 请求的基本概念
HTTP（超文本传输协议）是前端与后端通信的基础。当我们在浏览器中访问网页或发送数据时，实际上是在与服务器进行 HTTP 通信。一个完整的 HTTP 请求包含以下部分：
- 请求方法：GET（获取数据）、POST（提交数据）、PUT（更新数据）、DELETE（删除数据）等
- URL：请求的资源路径
- 请求头：包含请求的附加信息，如 Content-Type、Authorization 等
- 请求体：需要发送给服务器的数据（通常在 POST、PUT 请求中）
- 响应：服务器返回的数据，包含状态码、响应头和响应体
2. 为什么需要 HTTP 客户端工具
浏览器原生提供了 XMLHttpRequest 对象用于发送 HTTP 请求，但它存在以下问题：
- API 复杂，使用不够直观
- 处理异步操作不方便，容易陷入回调地狱
- 不支持 Promise
- 配置和错误处理繁琐
为了解决这些问题，各种 HTTP 客户端工具应运而生，Axios 就是其中的佼佼者。
3. Axios 简介
什么是 Axios？
Axios 是一个基于 Promise 的 HTTP 客户端库，用于在浏览器和 Node.js 中发送请求，让前端与后端 API 交互更简单。
核心优势
- ✅ Promise 支持：轻松处理异步操作
- ✅ 简洁 API：学习成本低，上手快
- ✅ 自动转换：自动处理 JSON 数据
- ✅ 拦截器：轻松处理请求/响应
- ✅ 跨平台：浏览器和 Node.js 都能用
安装
npm install axios
发送 GET 请求
import axios from 'axios';
axios.get('https://api.example.com/data')
.then(res => console.log('数据:', res.data))
.catch(err => console.error('错误:', err));
发送 POST 请求
axios.post('https://api.example.com/submit', {
name: '张三',
age: 25
})
.then(res => console.log('提交成功:', res.data))
.catch(err => console.error('提交失败:', err));
一、项目中的 Axios 配置
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:5173/api';
export default axios;
这三行代码做了三件事：
- 引入
axios库，用于发 HTTP 请求。 - 给
axios设基础路径http://localhost:5173/api，后续请求会自动拼这前缀。 - 导出配置好的
axios，供其他文件发请求用。
二、API 接口封装
我们可以按功能模块封装 API 接口：
import axios from './config'
// todos接口
export const getTodos = () => {
return axios.get('http://localhost:5173/api/todos')
}
export const getRepos = () => {
return axios.get('http://localhost:5173/api/repos')
}
这里我们定义了两个接口函数：
getTodos()：获取待办事项列表，使用 GET 方法请求/api/todos接口getRepos()：获取仓库列表，使用 GET 方法请求/api/repos接口
每个函数都返回 Axios 请求的 Promise，方便在调用处使用 async/await 语法。
三、在组件中使用 Axios
接口封装好后，我们可以在 React 组件中轻松使用。
// 导入 CSS 样式文件
import './App.css'
// 导入 React 的状态管理和副作用钩子
import { useState, useEffect } from 'react'
// 导入自定义 API 服务，用于获取数据
import { getTodos, getRepos } from './api'
/**
* 应用根组件
* 功能：获取待办事项和 GitHub 仓库数据并展示
*/
function App() {
// 定义待办事项状态，初始值为空数组
const [todos, setTodos] = useState([]);
// 定义仓库列表状态，初始值为空数组
const [repos, setRepos] = useState([]);
// 使用 useEffect 处理组件挂载后的副作用（数据获取）
useEffect(() => {
// 定义异步函数处理数据获取逻辑
const fetchData = async () => {
try {
// 调用 API 获取待办事项数据
const todoResult = await getTodos()
// 更新待办事项状态（假设 API 返回格式为 { data: [...] }）
setTodos(todoResult.data);
// 调用 API 获取仓库数据
const repoResult = await getRepos()
// 更新仓库状态（假设 API 返回格式为 { data: [...] }）
setRepos(repoResult.data);
} catch (error) {
// 错误处理（实际项目中应添加错误状态管理）
console.error('数据获取失败:', error);
}
}
// 执行数据获取函数
fetchData()
}, []) // 空依赖数组确保只在组件挂载时执行一次
return (
<>
{/* 渲染待办事项列表 */}
{todos.map(todo => ( // 遍历待办事项数组
<div key={todo.id}> {/* 使用唯一 ID 作为 key 优化渲染性能 */}
{todo.title} {/* 显示待办事项标题 */}
</div>
))}
{/* 渲染仓库列表 */}
{repos.map(repo => ( // 遍历仓库数组
<div key={repo.id}> {/* 使用唯一 ID 作为 key */}
{repo.name} {/* 显示仓库名称（修正为 name，假设 API 返回字段） */}
{repo.description} {/* 显示仓库描述 */}
</div>
))}
</>
)
}
export default App
这段代码展示了在 React 组件中使用 Axios 的标准流程：
- 引入需要的接口函数
- 使用
useState定义状态来存储获取的数据 - 使用
useEffect钩子在组件挂载时发起请求 - 使用
async/await简化 Promise 处理 - 将获取的数据更新到组件状态中
- 渲染数据到页面
四、Mock 数据在项目中的应用
1. 什么是 Mock 数据
Mock 数据是指在开发过程中，当后端 API 还未 ready 时，前端开发者自己模拟的测试数据。使用 Mock 数据可以让前端开发不受后端进度的影响，实现前后端并行开发。
2. 项目中的 Mock 配置
在这里使用了 vite-plugin-mock 插件来实现 Mock 功能。
import { viteMockServe } from 'vite-plugin-mock'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [
react(),
viteMockServe({
mockPath: 'mock', // mock数据存放的目录
enable: true, // 启用mock
}),
],
})
配置说明：
mockPath: 'mock'：指定 mock 数据存放在项目根目录下的mock文件夹中enable: true：启用 mock 功能
3. Mock 数据的定义
在这里我们定义了两个接口的 Mock 数据：
export default [
{
url: '/api/todos', // 接口路径
method: 'get', // 请求方法
response: () => {
const todos = [
{
id: 1,
title: 'todo1',
completed: false,
},
{
id: 2,
title: 'todo2',
completed: true,
}
]
return {
code: 0, // 状态码
message: 'success', // 提示信息
data: todos, // 数据
}
}
},
{
url: '/api/repos',
method: 'get',
response: () => {
const repos = [
{
id: 695370163,
title: 'ai_lesson',
description: "AI全栈工程师课程",
},
{
id: 152578450,
title: 'AlloyFinger',
description: "super tiny size multi-touch gestures library for the web. You can touch this",
}
]
return repos
}
},
]
每个 Mock 接口的定义包含以下部分：
url：接口路径，与真实 API 保持一致method：请求方法，如 GET、POST 等response：响应函数，返回模拟的数据
4. Mock 数据的使用场景
- 后端 API 未就绪：前端开发不需要等待后端接口完成
- 测试不同场景：可以模拟各种数据场景，包括成功、失败、异常等
- 性能测试：可以模拟大量数据，测试前端渲染性能
- 隔离开发：前后端开发可以独立进行，互不影响
5. 如何在项目中使用 Mock 数据
在我们的项目中，使用 Mock 数据非常简单：
- 按照上述方式配置
vite-plugin-mock插件 - 在
mock目录下定义 Mock 数据 - 正常调用 API 接口，Axios 会自动请求到 Mock 数据
五、最佳实践总结
- 集中配置：将 Axios 配置集中在一个文件中管理，便于统一维护
- 模块化封装：按业务功能划分 API 模块，提高代码可维护性
- 使用 async/await：简化 Promise 处理，使代码更加清晰
- 合理使用 Mock 数据：在开发阶段使用 Mock 数据提高开发效率
- 统一响应格式：前后端约定统一的响应格式，便于处理
- 错误处理：在组件中适当处理请求错误，提高用户体验
结语
通过本文的梳理，我们简单了解了前端与后端通信的核心流程：从 HTTP 请求的基础概念出发，借助 Axios 工具实现了请求的集中配置与模块化封装，再到在 React 组件中规范地使用接口数据，最后通过 Mock 数据解决了前后端并行开发的协同问题。
这一流程的核心价值在于标准化与效率：集中配置 Axios 实现了请求规则的统一管理，模块化封装 API 提升了代码的可维护性，而 Mock 数据则打破了开发进度的依赖壁垒。
