共计 1224 个字符,预计需要花费 4 分钟才能阅读完成。
利用 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…
常见问题
过程中可能呈现的问题
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 主文件中给全局引入
正文完
发表至: javascript
2022-03-01