React AJAX 知识点汇总
面向编程小白的详细指南
一、AJAX 是什么？
大白话解释：
AJAX（Asynchronous JavaScript and XML）是一种技术，允许网页在不刷新整个页面的情况下，从服务器获取数据并更新部分内容。
想象一下：就像你在餐厅点菜，服务员（浏览器）把你点的菜单（请求）送到厨房（服务器），厨房做好菜（数据）后，服务员只把你点的菜送到你桌上（更新页面部分内容），而不是把整个餐厅重新装修一遍（刷新整个页面）。
二、为什么在React中需要AJAX？
- 获取数据：从服务器获取用户数据、产品列表、文章内容等
- 提交数据：发送表单数据、用户评论、上传文件等到服务器
- 实时更新：在不刷新页面的情况下更新内容（如聊天应用、实时通知）
- 交互体验：创建更流畅的用户体验，避免页面刷新
React的核心思想：UI = f(data)
React组件根据状态(data)渲染UI，AJAX就是从服务器获取这些数据的方法之一。
三、在React中发送AJAX请求的方法
1. 原生Fetch API
// 获取数据
fetch(‘https://api.example.com/data’)
.then(response => response.json()) // 将响应转换为JSON
.then(data => {
// 使用数据更新状态
setItems(data);
})
.catch(error => {
// 处理错误
console.error(‘请求出错:’, error);
});
// 提交数据
fetch(‘https://api.example.com/data’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({ name: ‘John’, age: 30 }),
})
.then(response => response.json())
.then(data => console.log(‘成功:’, data))
.catch(error => console.error(‘错误:’, error));
2. Axios库（推荐）
Axios是一个流行的第三方库，提供了更简洁的API和更好的错误处理。
// 首先安装Axios: npm install axios
import axios from ‘axios’;
// 获取数据
axios.get(‘https://api.example.com/data’)
.then(response => {
// 数据在response.data中
setItems(response.data);
})
.catch(error => {
console.error(‘请求出错:’, error);
});
// 提交数据
axios.post(‘https://api.example.com/data’, { name: ‘John’, age: 30 })
.then(response => {
console.log(‘成功:’, response.data);
})
.catch(error => {
console.error(‘错误:’, error);
});
3. 其他方法
- XMLHttpRequest：较老的原生方法，现在很少直接使用
- jQuery AJAX：在React中不推荐使用，会增加不必要的依赖
建议：对于初学者，推荐使用Axios，因为它更简单、错误处理更好，并且兼容性更强。
四、在React中发送AJAX请求的时机
1. 使用类组件（Class Components）
在类组件中，通常在componentDidMount()生命周期方法中发送AJAX请求：
class UserList extends React.Component {
state = {
users: [],
isLoading: true
};
componentDidMount() {
// 组件挂载后发送请求
axios.get(‘/api/users’)
.then(response => {
this.setState({
users: response.data,
isLoading: false
});
})
.catch(error => {
this.setState({ isLoading: false });
console.error(‘加载用户失败:’, error);
});
}
render() {
// 渲染用户列表
}
}
2. 使用函数组件（Function Components）
在函数组件中，使用useEffect钩子来发送AJAX请求：
import React, { useState, useEffect } from ‘react’;
function UserList() {
const [users, setUsers] = useState([]);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
// 相当于componentDidMount
axios.get(‘/api/users’)
.then(response => {
setUsers(response.data);
setIsLoading(false);
})
.catch(error => {
setIsLoading(false);
console.error(‘加载用户失败:’, error);
});
// 清理函数（可选）
return () => {
// 可以在这里取消请求
};
}, []); // 空数组表示只在组件挂载时执行一次
if (isLoading) return
加载中…
;
return (
// 渲染用户列表
);
}
重要提示：不能在组件的render方法中直接发送AJAX请求！这会导致无限循环，因为每次请求后更新状态会导致重新渲染，而重新渲染又会发送新的请求。
五、处理AJAX请求的不同状态
一个良好的AJAX处理应该考虑三种状态：
1
加载中 (Loading)
显示加载指示器（如旋转图标）
→
2
成功 (Success)
显示获取到的数据
→
3
错误 (Error)
显示错误信息
完整状态处理示例
function ProductList() {
const [products, setProducts] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
useEffect(() => {
setIsLoading(true);
axios.get(‘/api/products’)
.then(response => {
setProducts(response.data);
setIsLoading(false);
})
.catch(err => {
setError(‘加载产品失败，请稍后重试’);
setIsLoading(false);
});
}, []);
if (isLoading) {
return
加载中，请稍候…
;
}
if (error) {
return {error}
;
}
return (
-
{products.map(product => (
- {product.name} ))}
六、使用async/await简化代码
async/await是处理异步操作的新语法，让异步代码看起来更像同步代码。
useEffect(() => {
// 定义一个异步函数
const fetchData = async () => {
setIsLoading(true);
try {
// 使用await等待请求完成
const response = await axios.get(‘/api/data’);
setData(response.data);
} catch (err) {
setError(‘加载数据失败’);
console.error(err);
} finally {
setIsLoading(false);
}
};
// 调用异步函数
fetchData();
}, []);
优点：代码更清晰，避免”回调地狱”，错误处理更简单（使用try/catch）
七、取消AJAX请求
当组件卸载时，如果AJAX请求还在进行中，应该取消它以防止更新已卸载的组件。
useEffect(() => {
// 创建一个取消令牌源
const source = axios.CancelToken.source();
const fetchData = async () => {
try {
const response = await axios.get(‘/api/data’, {
cancelToken: source.token // 关联取消令牌
});
setData(response.data);
} catch (err) {
if (axios.isCancel(err)) {
console.log(‘请求被取消:’, err.message);
} else {
// 处理其他错误
}
}
};
fetchData();
// 清理函数：组件卸载时取消请求
return () => {
source.cancel(‘组件卸载，取消请求’);
};
}, []);
八、最佳实践与常见问题
1. 提取AJAX逻辑到单独文件
将API请求函数提取到单独的文件中，保持组件代码简洁：
// api.js
export const getUsers = () => {
return axios.get(‘/api/users’);
};
export const createUser = (userData) => {
return axios.post(‘/api/users’, userData);
};
// UserList.js
import { getUsers } from ‘./api’;
// 在组件中使用
useEffect(() => {
getUsers().then(response => {
setUsers(response.data);
});
}, []);
2. 避免内存泄漏
确保在组件卸载时取消未完成的请求
3. 使用React Query或SWR库（高级）
对于复杂应用，可以考虑专门的数据获取库：
| 特性 | 原生方式 | React Query/SWR |
|---|---|---|
| 自动缓存 | ❌ 需要手动实现 | ✅ 内置 |
| 自动重试 | ❌ 需要手动实现 | ✅ 内置 |
| 请求去重 | ❌ 需要手动实现 | ✅ 内置 |
| 数据预取 | ❌ 困难 | ✅ 简单 |
常见错误：
- 在渲染方法中直接发送请求（导致无限循环）
- 忘记处理加载状态（用户不知道数据正在加载）
- 忽略错误处理（用户不知道请求失败）
- 组件卸载后更新状态（导致内存泄漏警告）
- 没有正确设置依赖数组（useEffect）
总结
- AJAX是什么：在不刷新页面的情况下获取/发送数据
- 何时使用：在useEffect（函数组件）或componentDidMount（类组件）中
- 常用工具：推荐使用Axios库
- 处理状态：加载中、成功、错误三种状态都要处理
- 简化代码：使用async/await语法
- 防止内存泄漏：组件卸载时取消请求
- 最佳实践：提取API逻辑到单独文件，考虑使用React Query等高级库
小白建议：从简单的Axios请求开始，掌握基本模式后再学习更高级的工具和技术。