liaohaoxiang
commented
1 year ago 栗子：
// ./mock/index.ts
import pkg from 'mockjs' const { Random } = pkg // { // // 请求地址 // url: string; // // 请求方式 // method?: MethodType; // // 设置超时时间 // timeout?: number; // // 状态吗 // statusCode?:number; // // 响应数据（JSON） // response?: ((opt: { [key: string]: string; body: Record<string,any>; query: Record<string,any>, headers: Record<string, any>; }) => any) | any; // // 响应（非JSON） // rawResponse?: (req: IncomingMessage, res: ServerResponse) => void; // } export default [ { url: '/api/test', method: 'get', response: () => { return { code: 200, success: true, message: 'ok', data: { 'categorys|5': [ { id: '@id', name: '@cname', age: Random.integer(1, 100), address: '@province', city: '@city', province: '@province', email: Random.email(), phone: /^1[0-9]{10}$/, regin: '@region', url: '@url', date: Random.date('yyyy-MM-dd'), }, ], }, } }, }, ]
// vite.config.ts
import { viteMockServe } from 'vite-plugin-mock' // mockjs //...省略一些代码 export default defineConfig({ plugins: [ react(), viteMockServe({ mockPath: '_mock', enable: true, logger: true, supportTs: true, watchFiles: true, // 是否监视数据文件夹中的文件并重新加载 }), ], })
// 假设App.tsx调用
useEffect(() => { axios.get('api/test').then(res => console.log(res)) }, [])
RickoNoNo3
这个库具体怎么用啊，文档里没讲Mock数据配置好之后怎么发起网络请求啊？
比如我的项目是使用fetch方法或者axios做的网络请求，想用这个库拦截一些后端还未实现的url的请求，使用假数据作为响应，具体可以怎么做？比如多加一层封装去控制哪些url走mock？