mock数据的模拟,以及如何请求Mock数据
安装mock包# 安装npm install mockjs准备一个mock数据,注意这里的images需要放在vue的public文件夹下,不然请求的时候无法拿到数据[{"id": "1","imgUrl": "/images/banner1.jpg"},{"id": "2","imgUrl": "/images/banner2.jpg"},{"id": "3","imgUrl": "/image
·
安装mock包
# 安装
npm install mockjs
准备一个mock数据,注意这里的images需要放在vue的public文件夹下,不然请求的时候无法拿到数据
[
{
"id": "1",
"imgUrl": "/images/banner1.jpg"
},
{
"id": "2",
"imgUrl": "/images/banner2.jpg"
},
{
"id": "3",
"imgUrl": "/images/banner3.jpg"
},
{
"id": "4",
"imgUrl": "/images/banner4.jpg"
}
]
引入mock模块,提供接口
// 引入mock模块
import Mock from "mockjs";
import banner from './banner.json'
// Mock数据 模拟接口
Mock.mock("/mock/banner",{code:200,data:banner});
在main.js注册mock ,注意 我这里配置了@的src路径,你们直接./寻找路径就可以了
import '@/mock/mockServe.js'
封装一个mockAPI
import axios from "axios";
import nprogress from "nprogress";
// 引入进度条样式
import 'nprogress/nprogress.css'
const baseURL = '/mock';
const instance = axios.create({
// 基础地址
baseURL,
// 默认超时的时间
timeout: 5000
})
// 请求拦截
instance.interceptors.request.use(config => {
// 拿到请求头
// config.headers.token = localStorage.getItem('token')
// 进度条开始动
nprogress.start();
return config
}, err => {
// 打印错误值
return Promise.reject(err)
})
// 响应拦截
instance.interceptors.response.use(
res => {
nprogress.done();
return res
},
error => {
if (error && error.response) {
switch (error.response.status) {
case 400:
Message.error('400')
break
// 401: 未登录,跳转至登录页
case 401:
Message.error('401')
break
case 403:
Message.error('403')
break
// 404请求不存在
case 404:
break
case 500:
// Message.error('服务器故障')
break
default:
break
}
return Promise.reject(error.response)
}
}
)
// 整体导出
export default instance
请求接口即可
export const getBanner = () => mockReq.get('/banner')
更多推荐
已为社区贡献4条内容
所有评论(0)