uni-app 如何 mock 数据
- 发布:2019-05-23 09:54
- 更新:2021-07-21 18:01
- 阅读:11973
uni-app mock数据
亲测可用!!
昨晚又想了一下,然后修改了下项目代码,找到了个uniapp项目底下能使用mock的方法,遂再来答一次这个提问。
由于mock.js的机制问题,在uniapp的小程序模式底下无法正常拦截请求,但是它的各种生成随机数据的方法依然可用,于是只要找到方法代替拦截请求即可,在发送请求的时候修改为uniapp条件编译并加上是否使用mock数据的标识来判断是返回mock数据还是发送请求,附以下代码:
// /mock/user.js - mock数据
import Mock from 'mockjs'
const loginStatus = function (){//login状态的返回数据格式
let flag = Mock.Random.boolean()
return {
userId:Mock.Random.string(32),
status:flag?'success':'failed',
msg:flag?'':'后端返回的错误提示的信息!'
}
}
export {loginStatus}
// /mock/index.js - 处理mock数据-仅在H5端生效
import Mock from 'mockjs'
import {contextPath} from '../api/index.js'
import {loginStatus} from './user'
if(contextPath == ''){//判断是否使用mock数据
Mock.mock(/loginOut/,function(options) {
return Mock.mock(loginStatus)
})
}
// /api/index.js请求部分
// #ifndef H5
import {loginStatus} from '../mock/user.js'
// #endif
//网站绝对路径配置
export let contextPath = ''
export const loginOut = params => {//登出
return new Promise((resolve, reject)=>{
// #ifndef H5
let status = loginStatus()
if(contextPath == '') resolve(status)//我这里使用contextPath判断是使用mock数据,还是发送请求,请根据自己项目需要自行修改这个判断条件
else
// #endif
flyio.post('/appUser/app/loginOut', params).then(res => resolve(res)).catch((err) => {reject('loginOut flyio err:' + err);})
})
}
这样就完美在uniapp上全端通用mock假数据了,但要注意一点:mock.js原本的“数据模板定义”不可用;即“'@string(32)'”等不可用,只能使用“Mock.Random.string(32)”,切记!
StarSky - 前端工程师
在微信小程序端报错,VM520:1 TypeError: Cannot read property 'split' of undefined
at Object.placeholder (mock.js:543)
at Object.string (mock.js:456)
at Object.Handler.gen (mock.js:209)
at Object.object (mock.js:380)
at Object.Handler.gen (mock.js:209)
at Object.Mock.mock (mock.js:106)
at VueComponent.onLoad (index.vue:31)
at invokeWithErrorHandling (mp.runtime.esm.js:1868)
at VueComponent.Vue.__call_hook (mp.runtime.esm.js:5868)
at ve.pageOptions.methods.onLoad (index.js:1437)
H5端APP端数据模拟是没问题的,不知道什么原因
y***@foxmail.com
试了下,这个mock只是针对小程序提供的api(比如getLocation(), requestPayment之类的),而不是用户的业务api
2022-08-11 14:59