Vue 中使用axios+mock模拟数据

mock 有什么用

我们平时在前后端分离的应用中，有时候可能接口还没有，但是我们的开发工作又不能暂停。
所以经常会写一些模拟数据，直接写在页面中的话，后期又需要修改。
这个时候呢，我们就希望有一个东西，他能像我们请求后台数据一样，返回我们要的数据。
mockjs 就是这样一个东西。他能拦截我们的请求，返回我们模拟的数据，只要定好的字段，后期只要切换一个请求就可以啦。

使用

1. 使用npm命令安装mockjs npm install -save mockjs
2. 在你想要放置你的数据的地方，新建一个文件夹mock,在mock下新建一个文件index.js,+ 这里就是我们注册所有mock服务的地方
   index.js

import axios from 'axios';

// 引入Mock
const Mock = require('mockjs');
Mock.XHR.prototype.withCredentials = true;  // 为了解决与后台接口共存时，丢失cookies的问题

// 设置拦截ajax请求的相应时间
Mock.setup({ timeout: '200-600' });

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys()
.forEach((key) => {
  if (key === './index.js') return;
  // 循环文件中的导出。允许一个文件中有多个，如果只需要单个，那可以直接用下面这个
  // configArray = configArray.concat(files(key).default);
  Object.keys(files(key).default)
  .forEach((item) => {
    configArray = configArray.concat([{ [item]: files(key).default[item] }]);
  });
});

// 注册所有的mock服务
configArray.forEach((item) => {
  for (let [path, target] of Object.entries(item)) {
    let protocol = path.split('|');
    Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
  }
});

// 根据需要 ， 拦截返回的数据。这个拦截了数据，只返回data部分
axios.interceptors.response.use(
  (response) => {
    console.log('response', response);
    return Promise.resolve(response.data);
  },
  (error) => {
    return Promise.reject(error);
  },
);

// 将axios 方法到window中，方便请求。
window.axios = axios;

3. 新建一个list.js,更多语法 查看 mock文档

let list = {
  status: 200,
  message: 'success',
  data: {
    total: 100,
    'result|10': [{
      id: '@guid',
      name: '@cname', // 中文名
      aliasName: '@first()', // 随机英文名
      'age|20-30': 23,
      'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师'],
      birthday: '@datetime',//随机时间
      mobile:'@mobile',  //
      'email': '@email()',//随机email
      'address': '@county(true)',//随机地址
      'domicile': '@city(true)',//随机城市
    }]
  }
};
let menuList = {
  status: 200,
  message: 'success',
  data: {
    total: 1,
    'result|1': [{
      id: '1',
      name: '菜单1',
    }]
  }
};

// 导出两份数据
export default {
  'post|/user/list': list,
  'post|/menu/list': menuList,
};

4. 在main.js中引用你的mock文件

        require('./assets/mock/index.js');

5. 使用方式

        const { data } = await window.axios['post']('user/list', params);

6. 效果如下，返回了100条数据