首先,确保在项目中安装了 axios 库。
在项目的根目录下创建一个名为“api.js”的文件,用于定义和导出 API 函数。
在“api.js”中引入 axios 库,并定义所需的 API 函数。例如:
import axios from 'axios';
export const getTodos = () => {
return axios.get('https://jsonplaceholder.typicode.com/todos');
};
export const createUser = (user) => {
return axios.post('https://jsonplaceholder.typicode.com/users', user);
};
这里定义了两个 API 函数,一个用于获取 TODO 列表,另一个用于创建用户。
import { getTodos } from './api';
const TodoList = () => {
const [todos, setTodos] = useState([]);
useEffect(() => {
getTodos()
.then(response => setTodos(response.data))
.catch(error => console.log(error));
}, []);
// 组件渲染代码
};
这里在“TodoList”组件中使用了需导出的“getTodos”函数来获取 TODO 列表,并将返回的数据更新到组件状态。
import { createUser } from './api';
const CreateUserForm = () => {
const [formData, setFormData] = useState({ name: '', email: '' });
const handleSubmit = event => {
event.preventDefault();
createUser(formData)
.then(response => console.log(response))
.catch(error => console.log(error));
};
// 组件渲染代码
};
在这里,使用了导出的“createUser”函数,将表格数据作为请求数据发送到服务器端