Mock

公司内网也用不了easyMock，加上easyMock有时候又不稳定，所以记录一下mock的使用

• 首先设置请求的拦截

import Mock from 'mockjs'
import { getTableData} from './response/data'

/**
 * 1.要拦截的URL，字符串或正则表达式
 * 2.要拦截的请求类型，get/post/put/delete/options...，
 * 3.响应的数据，可以是一个数据模板，也可以是返回数据模板的函数
 * 
 */
Mock.mock(/\/getTableData/, 'get', getTableData)

Mock.setup({
  // 请求500毫秒后返回
  timeout: 500
  // timeout: '100-600'：可以是一个字符串，100到600毫秒返回
})


export default Mock

• 分模块编写返回数据模板的方法

import Mock from 'mockjs'
const Random = Mock.Random

function addTemplate = (times, callback) => {
  let i = -1
  while (++i < times) {
    callback(i)
  }
}
export const getTableData = () => {
  const template = {
    name: '@name',
    'age|18-25': 0,
    email: '@email'
  }
  let arr = []
  addTemplate(5, () => {
    arr.push(Mock.mock(template))
  })
  return arr
}

• 在main.js中引入mock.js

if (process.env.NODE_ENV !== 'production') require('./mock')

---

在脚手架里也可以起devServer的服务来拦截请求

module.exports = {
  configureWebpack: {
    // 扩展webpack
    devServer: {
      before (app) {
        app.get('/api/goods', function (req, res) {
          res.json({
            list: [
              { text: 'aaa', price: 100 },
              { text: 'bbb', price: 80 },
              { text: 'ccc', price: 60 }
            ]
          })
        })
      },
      proxy: {
        // easymock开头的请求，webpack帮你转发到target之上
        '/easymock': {
          target: ' https://www.easy-mock.com/mock/...',
          changeOrigin: true,
          ws: true,
          pathRewrite: {
            '^/easymock': ''
          }
        }
      }
    }

  }
}