在开发中常常有需要使用mock模拟数据的情况,那在uniapp中也同样可以使用,但是注意在使用时一定要细心
一、uniapp中配置mock
1.安装axios及mockjs
//安装axios npm install axios //安装mockjs npm install mockjs
2.在项目根目录下创建mock文件
import Mock from "mockjs";
const Random = Mock.Random
const getImg = (data) => {
return {
code: 200,
msg: 'success',
data: {
'name': '@cname', // 中文名称
}
}
}
Mock.mock('http://localhost:3000/getImglist', 'get', getImg())
如果需要添加新的接口及数据,模仿const getImg及Mock.mock格式继续在后面编写即可
3.在main.js中引入mock文件(一定不要忘记)
4.在页面中使用mock接口
记得在页面中先引入axios
import axios from 'axios'
5.接口返回的数据
二、常见404问题及处理方式
下面给大家介绍mock常见接口404的原因
1.忘记在main.js中引入mock
这个真的是很常见但是时不时可能忘记引入,具体解决方式参考上面第3点
2.在uniapp中引入mock使用的是require
在vue中使用require引入倒是没什么问题,不清楚是否是uniapp版本问题,如果mock出现404排查其他地方都没有问题的话,可以尝试把mock.js和main.js中mock的引入方式从require变为import,具体可参考上面2.3点
3.axios请求路径与mock暴露的接口不一致
检查axios请求的路径及端口号,如果与mock中暴露出的不一致,修改mock接口中的路径与axios一致即可
4.axios与mock中的接口type大小写格式不一致
有时候在axios中method会用大写的方式,比如下图
但是axios会对method统一进行小写化处理,所以在mock中的type也应该是小写否则也会出现404的情况
以上就是uniapp中使用mock的基本方式和常见404问题,更多mockjs的api和配置参考mock官网介绍(官网地址:Home · nuysoft/Mock Wiki · GitHub)