Comments (8)
-
重新进行了自测,热更新是有效的,修改后接口重新返回的数据有更新。
接口数据的热更新是体现在重新发起请求后获取的数据,由于接口请求热更新的局限性,很难实现
mock.ts
文件更新后自动让客户端重新发起请求,所以在不同场景下,可能需要开发者手动刷新页面,或者进行其他触发二次请求的操作。
关于这一点,我可以实现一个新的reload
option,让开发者决定 mock 更新是否强制刷新客户端以重新发起请求。 -
mock 配置中的
query
,params
,body
,没有与axios
中的params
,data
对应,是由于 插件对url
的解析方式支持两种模式:{ url: '/api/list' }
,这种模式下,url
是一个静态的配置{ url: '/api/post/:postId' }
, 这种模式下,url
是一个动态路由匹配, 既可以命中/api/post/1
, 也可以命中/api/post/2
在这两种模式下,
url
均可以带上查询参数,如:/api/list?page=2
,/api/post/1?type=2
。 为了能够加以区分,提取出url
中包含的两种携带的数据,插件选择了将?page=2
,?type=2
这部分queryString
解析为query
, 而/api/post/:postId
的动态路由匹配,则解析为params
,即{ postId: 1 }
。这样做可以避免冲突,也更好理解。同时插件考虑是支持通过各种方式发起的请求,包括但不限于
axios
,所以主要考虑的是 遵循http
协议的规范。添加同义词配置我认为没有意义,反而会增加理解成本,而且还会导致
defineMock
提供的类型帮助失效。
from vite-plugin-mock-dev-server.
1、可能是我本地环境问题,有空再试一下
2、第二个,怎么说呢~~目前实际开发过程中,想达到一个url请求,比如设定以mock开头的,是有可能要走mock的接口,但实际是否启用mock,是结合开发和测试环境的其它环境变量参数进行控制的,也就是一个定义的url是根据配置最终处理成执行时的url,从而适配开发+mock接口、开发+后端接口,测试+mock接口,测试+后端接口4种情况,如果选择以axios的方式,现在的插件是无法获取到相应的参数的,而传参的格式必须是根据插件规定的方式来,相当于需要针对mock接口对参数进行特殊处理,至于其它方式发请求,还没尝试。感觉如果要更加灵活,达到支持各种方式发起的请求(至少目前axios请求的参数拿不到,应该算是不支持哈),增加同义词,相比较只能按照http规范来,不失为一种可以考虑的手段~
from vite-plugin-mock-dev-server.
我这边管理的项目中,也有包括使用 axios , fetch, 以及包括在小程序中的,使用axios库以及其他库没有发现问题,可否给出你这边使用 axios 和 mock 的相关代码示例?
from vite-plugin-mock-dev-server.
1、请大佬检阅~~
环境,v0.4.0 + vue 2.7.14 + vite 4.1.3 + Axios 1.3.3 + typescript 4.9.5,
2、vite.config.ts中插件的配置
import { resolve } from 'path'
import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
export function initMockDevServerPlugin() {
return mockDevServerPlugin({
prefix: 'mock',
include: 'mock/**/*.mock.{ts,js,cjs,mjs,json,json5}',
formidableOptions: {
// 配置上传资源存放目录
uploadDir: resolve(process.cwd(), 'uploads'),
// 可修改上传资源名称
filename: (name, ext, part) => {
return part.originalFilename!
},
},
build: {
serverPort: 6666,
dist: 'mockServer',
},
})
}
3、api.mock.ts:
import { defineMock } from 'vite-plugin-mock-dev-server'
export default defineMock([
{
url: '/mock/caseCache/getData',
body: (res, query, params, body) => {
console.log(res)
return {
data: {
query,
params,
body,
isLogin: true,
},
message: '成功',
code: '200',
}
},
},
])
4、请求接口
import { request } from '@/utils/request'
const url = {
getData: '/mock/proxyTest/caseCache/getData',
}
export function ApiGetSectionData(params, data): Promise<Jsonable> {
return request.get<Jsonable>(
{
params,
data,
url: url.getData,
},
{
requireAuth: false,
messageMode: 'message',
actionType: 'query',
},
)
}
ps:
1) url会根据配置,自动移除mock,或者proxyTest
2) params和data,对应axios中AxiosRequestConfig接口的params和data类型
export interface AxiosRequestConfig<D = any> {
url?: string;
method?: Method | string;
baseURL?: string;
transformRequest?: AxiosRequestTransformer | AxiosRequestTransformer[];
transformResponse?: AxiosResponseTransformer | AxiosResponseTransformer[];
headers?: (RawAxiosRequestHeaders & MethodsHeaders) | AxiosHeaders;
params?: any;
paramsSerializer?: ParamsSerializerOptions;
data?: D;
timeout?: Milliseconds;
……
5、实际请求
const querySection = async () => {
const data = await ApiGetSectionData(
{
name: 1234,
date1:
DateUtil.getDateTime(),
},
{
date2: DateUtil.getDateTime(),
},
)
console.log(data)
}
如果图片无法加载,可以浏览器访问这个地址,https://imgse.com/i/pSxojHA
7、另外好像热更新。。。我这边就是不行。。mock接口中,isLogin改为false。。刷新页面。返回值依旧是true。。
from vite-plugin-mock-dev-server.
3、api.mock.ts:
import { defineMock } from 'vite-plugin-mock-dev-server' export default defineMock([ { url: '/mock/caseCache/getData', body: (res, query, params, body) => { ❌ console.log(res) return { data: { query, params, body, isLogin: true, }, message: '成功', code: '200', } }, }, ])
这里有一个错误: method body
只接收一个参数 resquest
, query, params, body
是 resquest
参数的属性,可以通过解构语法获取:
{
body: (resquest) => {
const { query, params, body } = request
}
}
{
body: ({ query, params, body }) => {
}
}
从截图中我看到的有两个问题点, 一个是 响应体中的 body
为 undefined
,一个是反馈的 isLogin
没有更新。
问题1产生的原因是 request.headers['content-type']
值为 application/json;charset:UTF-8
导致内部未能匹配到跳过了解析,这个是 插件bug,我会进行修复;
问题2产生的原因,目前排查到的原因, 是由于在 windows环境下的 posix
为 \\
, 导致了热更新时查找文件模块进行重写时出现了匹配错误,我会在下个版本中一并修复。
感谢反馈 bug !
from vite-plugin-mock-dev-server.
以上发现的问题已在 v0.4.2
版本中修复,升级插件版本即可。
from vite-plugin-mock-dev-server.
以上发现的问题已在
v0.4.2
版本中修复,升级插件版本即可。
上面的问题,都已经解决~~
遇到个新"问题",但是不晓得能不能从插件层面进行容错~~
body: (res, query, params, body) => { ❌
这个修改的时候,我改错了,我写成了
(body: (res, {query, params, body} ) => {)
然后导致程序直接退出
E:\0WorkSpace\app\mock\api.mock.ts:30
body: (res, { query, params, body }) => {
^
TypeError: Cannot destructure property 'query' of 'undefined' as it is undefined.
at Object.body (E:\0WorkSpace\app\mock\api.mock.ts:30:19)
at E:\0WorkSpace\app\node_modules\.pnpm\[email protected][email protected]\node_modules\vite-plugin-mock-dev-server\dist\index.cjs:456:34
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Node.js v19.6.0
ELIFECYCLE Command failed with exit code 1.
这个写法肯定有问题,但万一手抖,改错了。。重新启动,时间成本略微有点高~
from vite-plugin-mock-dev-server.
@kenixFog 我将这个新问题转移到新的 issue #17 。
from vite-plugin-mock-dev-server.
Related Issues (20)
- 关于mock前置拦截功能 HOT 2
- 1.1.6版本开始`transform`排序规则存在问题 HOT 3
- BUG(response error): appendHeader is not a function HOT 2
- 建议说明使用 ESModule 作为 mock 文件时,可能存在内存泄露风险。 HOT 2
- Invalid define value (must be an entity name or valid JSON syntax): {"BASE_URL":"./","MODE":"production","DEV":false,"PROD":true,"LEGACY":__VITE_IS_LEGACY__} HOT 3
- 如何设置mock 接口支持跨域?或如何 全局设置 mockConfig HOT 3
- 1.2.0版本导致vite启动报错 HOT 4
- 怎么只在yarn run preview下开启mock数据?不想在其他环境使用mock HOT 5
- vite4.x版本中使用别名导致随机性的导入一些方法失败 HOT 3
- 关于拦截问题
- [bot] add contributors HOT 13
- 多个mock模块如何公用一套数据? HOT 5
- 希望可以显式定义 *.mock.ts 文件加载顺序,以便于控制不同文件中 mock 规则优先级。 HOT 12
- defineConfig不存在,文档是不是没更新? HOT 4
- next() 无法将 POST 请求转交给 Vite 默认代理中间件 HOT 7
- 希望 `mockDevServerPlugin` 添加一个 `base_url` 配置 HOT 2
- 是否可以支持mock数据低优先级 HOT 4
- mockServer 独立部署安装和启动报错 HOT 3
- mockServer 正常启动,但是接口进 mockServer 服务后报错,和一些实验性建议 HOT 6
- 未配置 vite 的 proxy 参数和插件的 prefix 参数,应输出警告信息。 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vite-plugin-mock-dev-server.