uniapp中使用mock数据及返回404的常见原因

在开发中常常有需要使用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

猜你喜欢

转载自blog.csdn.net/Sylvasylva/article/details/127652860