使用mock.js后,如何设置路由拦截
时间: 2023-03-24 14:00:53 浏览: 95
Mock.js 是一个 JavaScript 库,可以用来模拟数据,为前端开发提供便利。在使用 Mock.js 时,如果想要拦截网络请求并返回模拟数据,可以使用 Mock.js 提供的拦截器功能。
要使用拦截器功能,需要先创建一个 Mock.js 的拦截器实例。然后,通过该实例的 `mock` 方法来指定需要拦截的网络请求,并返回相应的模拟数据。最后,使用 `Mock.mock()` 方法将拦截器实例应用到全局的 AJAX 请求中,这样就可以拦截所有的 AJAX 请求并返回模拟数据了。
以下是一个示例代码,演示了如何使用 Mock.js 来拦截网络请求并返回模拟数据:
```
// 创建 Mock.js 拦截器实例
const mockInterceptor = new MockAdapter(axios);
// 拦截 GET /users 请求,并返回模拟数据
mockInterceptor.onGet('/users').reply(200, {
users: [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' },
]
});
// 将拦截器实例应用到全局的 AJAX 请求中
Mock.mock('/users', 'get', mockInterceptor.mock);
// 发送 GET /users 请求,将会返回模拟数据
axios.get('/users').then(response => {
console.log(response.data); // { users: [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' } ] }
});
```
在这个示例中,我们使用 Mock.js 拦截器实例 `mockInterceptor` 来拦截了 GET `/users` 请求,并返回了一个包含三个用户信息的模拟数据。然后,我们使用 `Mock.mock()` 方法将该拦截器应用到全局的 AJAX 请求中。最后,我们发送了一个 GET `/users` 请求,这个请求会被拦截器拦截,并返回模拟数据。