在前端开发中,需要模拟请求或者数据来做一些简单的调试,这里可以使用mock来模拟服务器接口;
1. 安装相应的包
这里需要安装两个包,一个是axios
,一个是axios-mock-adapter
;
项目安装后,首先在cmd
中安装:
npm install axios npm install axios-mock-adapter --save-dev
2. 创建相关文件
在src目录下创建mock文件夹,然后在mock文件夹中放置两个文件,一个server.ts
,一个index.ts
;
很明显我们是在server.ts
中构造请求,在index.ts
中暴露;
server.ts
代码内容如下:
import axios from 'axios' import MockAdapter from 'axios-mock-adapter' export default { bootstrap() { var mock = new MockAdapter(axios) // 在这里写构造请求 } }
index.ts
代码内容如下:
import mock from './server' export default mock
main.ts
中添加两行:
import mock from './mock' mock.bootstrap()
3. 构建请求
注意replay
返回的是一个数组就好了
Get
无参数:
mock.onGet("/users").reply(200, { users: [{ id: 1, name: "John Smith" }], }); axios.get("/users").then(function (response) { console.log(response.data); });
有参数:
mock.onGet("/users", { params: { searchText: "John" } }).reply(200, { users: [{ id: 1, name: "John Smith" }], }); axios .get("/users", { params: { searchText: "John" } }) .then(function (response) { console.log(response.data); });
Post
mock.onPost('/api/user/info').reply(function (config){ console.log(config) return [200, {status: 'success'}] }) axios.post('/api/user/info', {user:123, password:123}).then(res=>console.log(res))
注意
在搭配axios使用mock时,如果需要对axios进行二次封装,那mock就不应该使用axios,而是使用新封装的玩意进行处理;
// 假设二次封装后为request import request from './utils/request' // mock操作 var mock = new MockAdapter(request) var mock = new MockAdapter(request)
这样就可以避免request请求后老是报错的问题;