uniapp 裸mock构建
使用better-mock
安装better-mock
npm install better-mock
新建文件
- 新建mock文件夹
- mock文件夹下新建index.js
- 小程序平台要引入dist/mock.mp.js
- 根据数据模板生成模拟数据
//mock下的index.js
const Mock = require('better-mock/dist/mock.mp.js')
Mock.mock('api/test', {
'list|1-10': [{
'id|+1': 1
}]
})
全局引入
import Mock from './mock'
发送请求
uni.request({
url:'api/test',
success:res=>{
console.log(res)
}
})
请求接口封装
根目录下新建一个文件utile,在建一个request.js对请求拦截做mock模拟
let server_url='http://localhost:8080';//请求地址
function service(options = {}) {
options.url = `${server_url}${options.url}`;
//配置请求头
options.header = {
'content-type': 'application/x-www-form-urlencoded',
};
return new Promise((resolved, rejected) => {
//成功
options.success = (res) => {
if (Number(res.data.code) == 200) { //请求成功
resolved(res.data.data);
} else {
uni.showToast({
icon: 'none',
duration: 3000,
title: `${res.data.msg}`
});
rejected(res.data.msg);//错误
}
}
//错误
options.fail = (err) => {
rejected(err); //错误
}
uni.request(options);
});
}
export default service;
后续更改
经request.js之后mock下的index模拟接口需要更改
const Mock = require('better-mock/dist/mock.mp.js')
Mock.mock('http://localhost:8080/api/test', 'get', {
"code": 200,
"msg": "succsee",
"data": {
'list|1-10': [{
'id|+1': 1
}]
}
})
另写一个api.js对接口进行修改。位置自拟,在请求时导入即可
import request from '../../units/request.js'
export function getData(data) {
return request({
url: '/api/test',
method: 'GET',
data
})
}
请求处需要更改
import { getData } from './api.js';//导入上述封装js
export default {
methods: {
getData() {
getData('parameter').then(data => {
console.log(data);
}).catch((e) => {
console.log(e);
});
}
},
}