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