拦截器(Interceptors)会在每次发起ajaj请求和得到响应的时候自动被触发。
应用场景:
- Token身份认证
- Loading效果
- etc...
请求拦截器
通过axios.interceptors.request.use(成功的回调,失败的回调)可以配置请求拦截器。
代码语言:javascript复制axios.interceptors.request.use(function(config){
return config;
},function(error){
return Promise.reject(error);
})
注:失败的回调函数可以被省略。
请求拦截器-Token认证
代码语言:javascript复制import axios from 'axios'
axios.default.baseURL='http://www.api.com'
//配置请求的拦截器
axios.interceptors.request.use(config=>{
//为当前请求配置Token认证字段
config.headers.Authorization = 'Bearer xxx'
return config
})
vue.prototype.$http = axios
请求拦截器-展示Loading效果
可以借助element-ui提供的loading效果组件方便的实现loading效果的展示:
代码语言:javascript复制//1,按需导入Loading效果组件
import {loading} from 'element-ui'
//2.声明变量,用来存储loading组件的实例对象
let loadingInstance = null
//配置请求拦截器
axios.interceptors.request.use(config => {
//3.调用Loading组件的service()方法,创建loading组件的实例,并全屏展示效果
loadingInstance = Loading.service({fullscreen:true})
return config
})
响应拦截器
通过axios.interceptors.response.use(成功的回调,失败的回调)可以配置相应拦截器。
代码语言:javascript复制axios.interceptors.response.use(function(response){
return response;
},function(error){
return Promise.reject(error)
})
注:失败的回调函数可以被省略。
相应拦截器-关闭Loading效果
调用Loading实例提供的close()方法即可关闭Loading效果。
代码语言:javascript复制axios.interceptors.response.use(response => {
loadingInstance.close()
return response
})