Vite中自制mock服务器(不使用第三方服务)
短信预约 -IT技能 免费直播动态提醒
为什么要 mock？
- 后台接口还没完成，但前端要用到接口
- 我想篡改后台接口的结果，测试一些分支逻辑
起步
本篇文章会使用到 swr、axios、vite-plugin-mock，请自行安装
配置 vite进入 vite.config.ts，添加以下代码
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig(({ command }) => ({
plugins: [
react(),
viteMockServe()
],
}))
创建 mock 数据
- 创建
mock/test.ts文件
mkdir mock/ && touch mock/test.ts
- 添加 mock 数据
import { MockMethod } from 'vite-plugin-mock'
export default [
{
url: '/api/v1/me',
method: 'get',
response: () => {
return {
id: 1,
name: 'Niki'
}
}
}
] as MockMethod[]
使用 useSWR
在使用到的组件中用:
import useSWR from 'swr'
import axios from 'axios'
export const Home: React.FC = () => {
const { data, error, isLoading } = useSWR('/api/v1/me', path => {
return axios.get(path)
})
if (isLoading) {
return <div>加载中...</div>
}
if (error) {
return <div>加载失败</div>
}
return (
<div>Hi, I am {data.name}!</div>
)
}
判断是否在开发环境
在 vite.config.ts 里添加
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/
export default defineConfig(({ command }) => ({
+ define: {
+ isDev: command === 'serve' // 它会写在 window.isDev = true / false
+ },
plugins: [
react(),
viteMockServe()
],
}))
封装请求
这里只是简单的封装一下
Axios
mkdir class="lazy" data-src/lib/ touch class="lazy" data-src/lib/ajax.tsx
import axios from 'axios'
axios.defaults.baseURL = isDev ? '/' : 'xxx' // 'xxx' 改为线上的 ip:端口
axios.defaults.headers.post['Content-Type'] = 'application/json'
axios.defaults.timeout = 10000
export const ajax = {
get: (path: `/${string}`) => {
return axios.get(path)
}
}
最终使用
import useSWR from 'swr'
import { ajax } from '../lib/ajax'
export const Home: React.FC = () => {
const { data, error, isLoading } = useSWR('/api/v1/me', path => {
return ajax.get(path)
})
if (isLoading) {
return <div>加载中...</div>
}
if (error) {
return <div>加载失败</div>
}
return (
<div>Hi, I am {data.name}!</div>
)
}到此这篇关于Vite中自制mock服务器(不使用第三方服务)的文章就介绍到这了,更多相关Vite mock服务器内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
