使用mockjs模拟接口返回数据

1 安装插件

1. mockjs

   npm install mockjs
   或：
   yarn add mockjs
   

2. axios

   npm install axios
   

2 封装axios请求

1. 模拟请求地址为：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 模拟接口返回数据

1. 定义返回数据和接口路径

   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);
      })