直接上源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mock拦截axios请求</title>
</head>
<body>
<!-- 本地npm安装mock和axios -->
<!-- <script src="../node_modules//mockjs//dist//mock.js"></script> -->
<!-- <script src="../node_modules/axios//dist/axios.js"></script> -->
<!-- 官方在线引入地址(推荐使用本地) -->
<script src="http://mockjs.com/dist/mock.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*************** axios拦截配置 ***************************************************/
/**
* 请求拦截
*/
axios.interceptors.request.use(config => {
console.log(config);
//可以通过该参数修改请求的地址 ,config 还有很多参数可以设置如,请求超时时间等等
//config.url = 'data2.json'
// 从本地存储中获取token,当然这里也可以从cookie中获取token
let token = localStorage.getItem('token');
if (token) {
// 设置请求头中token的参数
config.headers.common['token'] = localStorage.getItem('token');
}
return config;
});
/**
* 响应拦截
*/
axios.interceptors.response.use(response => {
return response;
});
/********************************************************************************/
/*************** mock模拟数据 ****************************************************/
// mock数据拦截http://121.36.146.10:8084/industry请求 模拟响应数据
Mock.mock('http://121.36.146.10:8084/industry', {
'data': [{
id: 1,
iId: 0,
industryName: "互联网/IT/电子/通信"
}, {
id: 2,
iId: 0,
industryName: "房地产"
}, {
id: 3,
iId: 0,
industryName: "金融业"
}, {
id: 4,
iId: 0,
industryName: "建筑业"
}],
'msg': "ok",
'status': 200
});
/********************************************************************************/
//设置全局的baseURL
axios.defaults.baseURL = 'http://121.36.146.10:8084/'
axios.get('industry').then(res => {
console.log(res.data) // 直接打印res可以显示很多数据 如响应头信息等等
});
</script>
</body>
</html>
标签:axios,请求,token,拦截,config,mock From: https://blog.51cto.com/u_14671216/6398512