axios请求拦截以及响应拦截

作为一个出色的http请求库，axios提供了强大请求拦截和响应拦截功能。

请求拦截

//引入vuex
import store from '@/store'
...
axios.interceptors.request.use(config => {
  //将token添加到了request的header里面
  const token = store.state.token;
  config.headers.common['Authorization'] = token
  // loading
  return config
}, error => {
  console.log(error)
  return Promise.reject(error)
})

通过拦截器可以实现请求的前置操作，例如，这里实现了比较常见的将token添加到header中。当然，在default中处理token也是可以的。所以网上大部分对拦截器的操作都是可以放到defaults中执行的，并没有什么区别；个人认为请求前拦截可以结合一些定时器已经前端监控相关插件的使用。

响应拦截

需要注意一下响应拦截的执行顺序，先执行axios.interceptors.response.use然后再执行正常的响应处理;

// 响应拦截器
axios.interceptors.response.use(    
    response => {
        // 这里的response返回的HTTP状态码为2XX的情况，可以在这里集中处理200+JSON形式中JSON中前后端约定的状态码
    },   
    //这里的error返回的是HTTP状态码不是2XX的情况，可以在这里处理不同HTTP的status
    error => {            
        if (error.response.status) {            
            switch (error.response.status) {                
                case 401:                    
                //未登录的处理              
                case 403:
                //权限不足的处理                
                    break; 
                case 404:
              // 404请求不存在的处理
                    break;
                // 其他错误，直接抛出错误提示
                default:
                //默认处理
            }
            return Promise.reject(error.response);
        }
    }    
});