之前讲过 mock 里面用 用axios 遇到的坑， 然后项目中用的是 fetch ，果然我又遇到坑了，写个小笔记。
因为项目的接口并没有通，但是接口请求是存在的，要用 mock 拦截，让请求的数据直接跳到 mock。
mock文件配置:
// 使用 Mock
const
Mock =
require(
'mockjs');
let
test =
Mock.
mock({
'list|1-100'
: [{
'id|+1'
:
1,
// 序号 属性值自动加 1，初始值为 1
'businesscode'
:
/\d
{1,10}
/,
// 商户ID
'proversion|1'
: [
'标准版',
'企业版',
'试用版'],
// 产品版本 随机选取 1 个元素
'storecode'
:
/\d
{1,10}
/,
// 门店编码
'storename'
:
'@cname',
// 门店名称
'status|1'
: [
'试用',
'使用',
'续用'],
//状态 随机选取 1 个元素
'effectdate'
:
'@DATETIME("yyyy-MM-dd HH:mm:ss")',
// 有效日期
}],
"page"
:
1,
"pageSize"
:
5,
"totalRecords"
:
100,
});
module.
exports = {
[
`Get /api/recharge`](
req,
res) {
res.
status(
200).
json(
test);
},
};
roadhogrc.mock.js 配置文件:
const
fs =
require(
'fs');
const
path =
require(
'path');
const
mockPath =
path.
join(
__dirname +
'/mock');
const
mock = {};
fs.
readdirSync(
mockPath).
forEach(
file
=> {
Object.
assign(
mock,
require(
'./mock/' +
file));
});
module.
exports =
mock;
service.js 文件配置：
import {
stringify
}
from
'qs';
import {
getServiceUrl
}
from
'../../common/config';
import
request,{
requestGet}
from
'../../utils/request';
// 配置接口地址，进行了判断，如果是在线环境，则是把后面的 urms 接上去，如果不是将用 mock 的数据
// const dev = process.env.NODE_ENV == 'production' ? false : true;
// export function fetch(params) {
// const apiurl = '/api/recharge';
// const url = dev === true ? apiurl : getServiceUrl(apiurl, 'urms');
// console.log(url)
// return request(url, `${stringify(params)}`);
// }
export
function
fetch(
params) {
return
requestGet(
'/api/recharge',
`
${
stringify(
params)
}
`);
}
// 原先的接口地址
// export function exportOut(params) {
// return request(getServiceUrl('/recharge/exportOut.action', 'urms'), `${stringify(params)}`, 'blob', '商品信息.xls');
// }
这里面我遇到个问题，就是 mock 里面的配置的路径要和 service 一致。不然会报端口错误，以及跨域问题，因为不在一个端品肯定会遇到这个跨域问题。这个是解决办法之一。
要注意一点，我在 service.js 里面注入了 {requestGet} 这个，是因为底层有个封装的文件，然后可以直接调用 get 方法。
有个绿色的注释是为了进行判断，是否是在线环境，如果是在线环境的话，会直接把系统的字段加上去，如果是测试环境，刚直接掉用 mock 里面的数据。还有要注意一点，这里用的 request 是 post 请求的方法，要在mock 里面把 get 改成 post ，要大写。然后在 service.js 里面就不用在注入{request}了。
// 琦哥配置接品地址，进行了判断，如果是在线环境，则是把后面的 urms 接上去，如果不是将用 mock 的数据
// const dev = process.env.NODE_ENV == 'production' ? false : true;
// export function fetch(params) {
// const apiurl = '/api/recharge';
// const url = dev === true ? apiurl : getServiceUrl(apiurl, 'urms');
// console.log(url)
// return request(url, `${stringify(params)}`);
// }
module.
exports = {
[
`POST /api/recharge`](
req,
res) {
res.
status(
200).
json(
test);
},
};