Vue使用element和axios拦截实现加载效果

import axios from 'axios';
import { Message ,Loading } from 'element-ui';
import router from '../router';
// 请求拦截
let loading   

function startLoading() {    //使用Element loading-start 方法
    loading = Loading.service({
        lock: true,
        text: '加载中...',
      
    })
}

function endLoading() {   
	 //使用Element loading-close 方法
    loading.close()
}
axios.interceptors.request.use(config=>{
	  startLoading()
	  // 请求前的拦截 设置统一的headers
	  if(localStorage.Admintokens){
		  config.headers.Authorization=localStorage.Admintokens
	  }
	return config;
},err=>{
	
	return Promise.reject(err);
})




axios.interceptors.response.use(response=>{
	endLoading();
	return response;
},error=>{
            //关闭加载
		endLoading()
	if (error.response) {
		
		//弹出错误信息
		Message.error(error.response.data.msg);
		//如果是401和404的话就跳转登陆页面
            if (error.response.status==401 || error.response.status==404 ) {
			//清除token信息
			localStorage.removeItem('Admintokens');
			router.push('/login')
                
                   
            }
        }
        return Promise.reject(error.response.data)
})
// 相应拦截

export default axios;

axios.interceptors.request

代表发送请求之前做的一些事情

axios.interceptors.response

代表发送请求后返回，在这里可以做一些逻辑