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