react 如何看接口
查看接口请求的方法
在React中查看接口请求可以通过浏览器开发者工具或代码调试实现。以下是几种常见方法：
使用浏览器开发者工具 打开Chrome/Firefox的开发者工具（F12），切换到"Network"选项卡。刷新页面后，所有网络请求会显示在列表中，筛选XHR或Fetch类型请求可查看接口调用详情。
添加请求拦截器 在axios等HTTP库中添加拦截器，打印请求和响应信息：
axios.interceptors.request.use(config => {
console.log('Request:', config);
return config;
});
axios.interceptors.response.use(response => {
console.log('Response:', response);
return response;
});调试组件内的接口调用
对于函数组件，可在useEffect中打印接口数据：
useEffect(() => {
const fetchData = async () => {
const res = await axios.get('/api/data');
console.log('API Response:', res.data);
};
fetchData();
}, []);对于类组件，可在componentDidMount生命周期中执行类似操作。
使用React开发工具
安装React Developer Tools浏览器扩展，通过组件树查看组件props和state，包含接口返回的数据。结合Redux DevTools可查看通过Redux管理的接口数据状态变化。
接口Mock调试
开发阶段可使用Mock服务拦截真实请求：
- 配置Webpack的devServer.proxy转发请求
- 使用Mock.js生成模拟数据
- 采用json-server搭建本地API服务
// mock示例
Mock.mock('/api/data', {
'list|10': [{id: 1, name: '@cname'}]
});
