axios拦截器

拦截器（Interceptors）会在每次发起ajaj请求和得到响应的时候自动被触发。

应用场景：

• Token身份认证
• Loading效果
• etc...

请求拦截器

通过axios.interceptors.request.use(成功的回调，失败的回调)可以配置请求拦截器。

axios.interceptors.request.use(function(config){
    return config;
},function(error){
    return Promise.reject(error);
})

注：失败的回调函数可以被省略。

请求拦截器-Token认证

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效果的展示：

//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(成功的回调，失败的回调)可以配置相应拦截器。

axios.interceptors.response.use(function(response){
    return response;
},function(error){
    return Promise.reject(error)
})

注：失败的回调函数可以被省略。

相应拦截器-关闭Loading效果

调用Loading实例提供的close()方法即可关闭Loading效果。

axios.interceptors.response.use(response => {
    loadingInstance.close()
    return response
})