利用mock模拟项目api
原理
- 利用axios发起请求
- 利用axios-mock-adapter处理拦截请求
核心实现代码
# mock创建
const MockAdapter = require('axios-mock-adapter');
const axios = require('axios');
const Mock = new MockAdapter(axios);
Mock.onGet("/api/super-store/big-discounts").reply(async () => {
try {
return [200, bigDiscountList];
} catch (err) {
console.error(err);
return [500, {
message: "Internal server error"
}];
}
});
## replay 是回复，模拟你请求后的response
## get 用 onGet post 用 onPost
## 正则直接写 mock.onGet(/\/users\/\d+/)
## 你如果带参数请求，mock的replay里面的函数，应该这样写
(config)=>{
JSON.parse(config.data)//解析axios传过来的值
你可以用
}
## 如果想模拟网络延迟，
var mock = new MockAdapter(axiosInstance, { delayResponse: 2000 });
## 如果你想引入很多mock接口，并全部匹配这些请求
例如：
const MockAdapter = require('axios-mock-adapter');
const axios = require('axios');
const Mock = new MockAdapter(axios);
import "./server/furniture-shop/productsDB";
import "./server/grocery3-shop/productsDB";
import "./server/related-products/productsDB";
Mock.onAny().passThrough();//这个是match all requests
axios-mock-adapter学习链接：https://www.npmjs.com/package/axios-mock-adapter
常见问题
过程中可能出现的问题
error - Error: connect ECONNREFUSED 127.0.0.1:80
你写的axios请求url可能是 /api/ 等等，不带前缀的话，默认从你的80端口发请求
你也可以用 axios.defaults.baseURL = '修改你的默认请求url'造成这个的情况，
1、你的mock可能没有把文件放到类似index文件中，就是你需要利用mock数据的文件
2、如果你是使用框架react、vue或者集成两者的遍历框架，例如next。js等等，同理你需要找到对应文件添加，或者在类似app。js主文件中给全局引入
