😊 antd pro中如何使用mock数据以及调用接口 😊
发布时间：2025-03-21 04:23:27来源：
在使用 `antd pro` 开发项目时，合理配置 mock 数据和调用接口是提升开发效率的重要环节。首先，我们可以通过 `config/proxy.ts` 文件来设置 mock 数据拦截规则。例如，当后端接口未完成时，可以利用 `mockjs` 模拟返回值，比如 `http://mock-api.com` 可以直接返回预设的数据格式。
接着，在 `src/mock` 目录下创建对应的 `.ts` 文件，定义 mock 数据逻辑。比如，`index.ts` 文件中可以这样写：
```typescript
import { MockMethod } from 'mockjs';
export default [
{
url: '/api/getData',
method: 'get',
response: () => {
return {
code: 200,
data: {
name: 'Mock Name',
age: 25,
},
};
},
},
];
```
当需要正式调用接口时，则需切换到真实的 API 地址，并确保环境变量正确配置（如 `.env` 文件中的 `REACT_APP_API_URL`）。同时，利用 `umijs` 提供的 `request` 方法封装请求逻辑，方便后续维护。
最后，记得测试接口是否正常工作，结合浏览器开发者工具检查网络请求。通过以上步骤，你就能高效地在 `antd pro` 中实现 mock 数据与真实接口的无缝切换啦！🚀
免责声明：本文为转载，非本网原创内容，不代表本网观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
