1 安装插件
-
mockjs
npm install mockjs 或: yarn add mockjs
-
axios
npm install axios
2 封装axios请求
-
模拟请求地址为:baseURL。
import axios from 'axios' import { MessageBox, Message } from 'element-ui' const mock = axios.create({ baseURL: 'http://xx.xx.xx:xxx', // withCredentials: 'omit' }) // http请求拦截器 mock.interceptors.request.use(config => { // 请求携带token // config.headers.authorization = window.sessionStorage.getItem('token') return config }, error => { return Promise.reject(error.response) }) mock.interceptors.response.use(data => { console.log(data) return data }, error => { let _status = error.response && error.response.status console.log(_status) if (_status > 400 && _status < 500 || !_status) { // eslint-disable-next-line no-undef // ElMessage.error("连接失败,请检查网络连接!"); Message({ message: '连接失败,请检查网络连接!', type: 'error', duration: 2 * 1000, offset: window.screen.height / 2 }) } else if (_status > 500 && _status < 600) { // eslint-disable-next-line no-undef // ElMessage.error("服务器异常,请联系管理员!"); Message({ message: '服务器异常,请联系管理员!', type: 'error', duration: 2 * 1000, offset: window.screen.height / 2 }) } else { // eslint-disable-next-line no-undef // ElMessage.error("登陆已失效,请重新登录!"); Message({ message: '登陆已失效,请重新登录!', type: 'error', duration: 2 * 1000, offset: window.screen.height / 2 }) } // router.push('/login') return Promise.reject(error) }) export default mock
3 模拟接口返回数据
-
定义返回数据和接口路径
import Mock from 'mockjs' const baseURL = 'http://http://xx.xx.xx:xxx' let data = { statu: 0, "list|1": [ { date: "@date('yyyy-MM-dd')", name: "@cname", address: "@county(true)" } ] } module.export = [ Mock.mock("http://127.0.0.1:3000/getData", "post", data) ]
注意:该文件必须在
main.js
里引用。
4 使用mock接口
1.引用
//封装的axios文件
import mock from '@/utils/request_mock.js';
2.使用
mock.post('/getData').then((res)=>{
console.log(res);
})