axios
axios github地址
使用vue的时候常用的请求工具
axios拦截器是什么
http 是无状态协议 所以每次请求都需要使用唯一识别的token去判断是那个用户
axios拦截器就是用于封装 在每次请求过程都 将请求的数据进行拦截
axios拦截器能做什么
把token添加到请求的数据中
统一处理每次请求都需要处理的数据 例如前后端分离的时候 用户登陆一次 在之后的每次请求中都需要携带用户信息进行用户验证
无需每次发送请求都进行手动添加
axios拦截器怎么用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
// 请求拦截器 加载动画
axios.interceptors.request.use(function (config) {
console.log(config)
console.log('请求拦截器！')
// 在这里设置请求动画开始
Loading.service({
background:'rgba(0,0,0,0.2)'
});
// 这里添加token认证
config.params = Object.assign({}, config.params, {
// token: getCookie('token'),
// rnd: Math.random() // 添加随机数防止浏览器缓存
})
return config
}, function (error) {
console.log('请求出错的时候发生的事情！')
return Promise.reject(error)
})
// 响应拦截器
axios.interceptors.response.use(function (response) {
console.log('响应拦截器！')
// router.push({ // 如果后台返回的数据 显示用户没有登陆 那么控制用户跳转到登录页面
// path: '/b'
// })
// 处理返回前端token过期、
//清空token username
// 跳转到首页
// 在这里设置请求动画结束
let loadingInstance = Loading.service();
loadingInstance.close();
return response
}, function (error) {
console.log('响应出错的时候触发的拦截器！')
return Promise.reject(error)
})
|
