react如何访问接口
在React中访问接口的方法
React中访问接口通常使用fetch或第三方库如axios。以下是具体实现方式：
使用fetch访问接口
fetch是浏览器原生API，现代React项目可直接使用：
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));使用axios访问接口
axios需要先安装：
npm install axios使用示例：
import axios from 'axios';
axios.get('https://api.example.com/data')
.then(response => console.log(response.data))
.catch(error => console.error(error));在useEffect中调用接口
React函数组件通常在useEffect中调用接口：
import { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(res => res.json())
.then(data => setData(data));
}, []);
return <div>{data && data.message}</div>;
}处理异步请求
使用async/await语法更清晰：
async function fetchData() {
try {
const response = await axios.get('https://api.example.com/data');
console.log(response.data);
} catch (error) {
console.error(error);
}
}自定义Hook封装
可创建自定义Hook复用请求逻辑：
function useApi(url) {
const [data, setData] = useState(null);
useEffect(() => {
axios.get(url).then(res => setData(res.data));
}, [url]);
return data;
}注意事项
- 跨域请求需后端配置CORS或使用代理
- 生产环境应将API地址放在环境变量中
- 组件卸载时应取消未完成的请求（axios可用CancelToken）
