mock.js的使用

mock.js的使用

mockjs简介

mockjs主要用来拦截ajax请求，生成模拟数据，在日常生活中当后台给出了接口文档但是尚未实现接口时，此时前端可以使用mockjs来模拟后台接口，生成模拟数据进行开发。

安装mockjs

npm i mockjs -D

mockjs的使用

第一步：新建mock文件夹以及相关的mock文件

第二步：在main.js文件中引入新建的文件

// 导入mockjs
import './mock/mock.js'

第三步：在src/mock/mock.js文件中编写相关接口以及模拟ajax的响应数据

// 引入mockjs
const Mock = require('mockjs')
Mock.setup({
  // 延迟时间200毫秒
  timeout: 200
})
const Random = Mock.Random
const Result = {
  code: 200,
  msg: '操作成功',
  data: null
}

/**
 * Mock.mock(url, post / get, function (options);
 * url 表示需要拦截的 URL，
 * post / get 需要拦截的 Ajax 请求类型
 *
 * 用于生成响应数据的函数
 */
Mock.mock('/testMockJSApi', 'get', () => {
  // 返回10条随机数据
  return Mock.mock({
    'data|10': [
      {
        name: '@cname', // 随即中文名
        msg: '@cparagraph(2,3)', // 随机段落
        date: '@datetime'// 随机日期
      }
    ]
  })
})

Mock.mock('/testMockJSApi/modify', 'post', (options) => {
  const params = JSON.parse(options.body)
  console.log(options, params)
  const data = Mock.mock({
    'data|10': [
      {
        name: '@cname', // 随即中文名
        msg: '@cparagraph(2,3)', // 随机段落
        date: '@datetime'// 随机日期
      }
    ]
  })
  return Object.assign({}, Result, data)
})

第三步：在项目中调用模拟接口（以vue项目为例）

import axios from 'axios'
created() {
  this.initListData()
  this.initPostListData()
},
methods: {
  async initListData() {
    const { data } = await axios.get('/testMockJSApi')
    console.log(data, 123)
  },
  initPostListData() {
  	const { data } = await axios.get('/testMockJSApi/modify')
  	console.log(data, 456)
    }
}

mockjs结合axios进行使用

第一步：封装axios（在request.js文件中封装axios）

import axios from 'axios'
import { Message } from 'element-ui'
const errorCode = {
  '401': '认证失败，无法访问系统资源',
  '403': '当前操作没有权限',
  '404': '访问资源不存在',
  'default': '系统未知错误，请反馈给管理员'
}
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分（在使用mockjs模拟数据时不需要配置baseURL）
  // baseURL: monitorBigScreen,
  // 超时
  timeout: 10000
})

// request拦截器
service.interceptors.request.use(config => {
  return config
}, error => {
  Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
  // 未设置状态码则默认成功状态
  const code = res.data.code || 200
  // 获取错误信息
  const msg = errorCode[code] || res.data.msg || errorCode['default']
  if (code === 401) {
    Message({ message: msg, type: 'error' })
    return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
  } else if (code === 500) {
    Message({ message: msg, type: 'error' })
    return Promise.reject(new Error(msg))
  } else if (code === 601) {
    Message({ message: msg, type: 'warning' })
    return Promise.reject('error')
  } else if (code !== 200) {
    Message({ message: msg, type: 'error' })
    return Promise.reject('error')
  } else {
    return res.data
  }
},
error => {
  let { message } = error
  if (message === 'Network Error') {
    message = '后端接口连接异常'
  } else if (message.includes('timeout')) {
    message = '系统接口请求超时'
  } else if (message.includes('Request failed with status code')) {
    message = '系统接口' + message.substr(message.length - 3) + '异常'
  }
  Message({ message: message, type: 'error', duration: 5 * 1000 })
  return Promise.reject(error)
}
)
export default service

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url,, params) {
  return new Promise((resolve, reject) => {
    service.get(url, {
      params: params
    })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function post(url, params) {
  return new Promise((resolve, reject) => {
    service.post(url, params)
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

/**
 * put方法，对应put请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function put(url, params = {}) {
  return new Promise((resolve, reject) => {
    service.put(url, params)
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

/**
 * Delete方法，对应delete请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function Delete(url, params = {}) {
  return new Promise((resolve, reject) => {
    service.delete(url, { params })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

第二步：通过axios封装接口（在list.js文件中封装axios接口）

import { get, post } from './request'
// 查询装备列表
export const getList = () => get('/testMockJSApi')
export const postList = (data) => post('/testMockJSApi/modify', data)

第三步：在项目中使用（以vue项目为例）

import { getList, postList } from '@/server/list'
created() {
  this.initListData()
  this.initPostListData()
},
methods: {
  initListData() {
    getList().then(res => {
        console.log(res, 123123)
    }).catch(err => {
        console.log(err, 'err')
    })
  },
  initPostListData() {
      postList({ name: 'test' }).then(res => {
        console.log(res, 123123)
      }).catch(err => {
        console.log(err, 'err')
      })
    }
}