axios+vue+element-ui以服务端方式动态加载loading

最近在开发公司的后台界面，因为要前后端分离，所以就用了Vue这个非常火的框架，前端界面就用的饿了么团队的开源组件element-UI，界面非常看好，设计的也挺人性化，大大缩短了前端开发周期。但这今天遇到个问题，就是当我点击侧边栏的选项时，右侧根据api渲染的数据有一个3秒钟的延迟，恐怕像我这种强迫症的人忍受不了的，所以就看到了，element-ui中的loading加载动画，通过loading来占据这无任何效果的3秒钟延迟时间，这里用到了axios的拦截器，当向后端请求数据时，开始加载loading动画，请求到数据后，loading动画消失。废话不多说，直接上代码：

main.js

import Vue
from 'vue'

import App
from './App'

import router
from './router'

import
'babel-polyfill'

import Element
from 'element-ui'

import {Loading}
from
'element-ui'      ****在这里引入Loading组件****

import
'element-ui/lib/theme-chalk/index.css'

import Axios
from 'axios'

import Vuex
from 'vuex'

// Axios.defaults.auth = {

// username: '',

// password: ''

// }

//
添加请求拦截器

Axios.interceptors.request.use(config => {

//
在发送请求之前做些什么

//判断是否存在token，如果存在将每个页面header都添加token

if (store.state.token) {

config.headers.common['Authentication-Token'] = store.state.token

}

//请求前到请求到数据这段时间用加载动画来代替，以服务方式调用
****************************

let loading = Loading.service({

fullscreen:
true,

text:
'拼命加载中...',

// target:'#main'

});

****************************

return config;

}, error => {

//
对请求错误做些什么

console.log("发送失败");

****************************

let loading = Loading.service({});

loading.close();    //关闭加载前，记得重新定义实例

****************************

return Promise.reject(error);

});

//
添加响应拦截器

// Axios.interceptors.response.use(response => {

// //
对响应数据做点什么

// return response;

// }, error => {

// //
对响应错误做点什么

// console.log(error.response);

// if (error.response.status===504){

// console.log(error.response.statusText);

// alert(error.response.statusText);

// }

// return Promise.reject(error);

// });

// http response
拦截器

Axios.interceptors.response.use(

response => {

****************************

let loading = Loading.service({});

loading.close();
****************************

return response;

},

error => {

if (error.response) {

switch (error.response.status) {

case
401:

this.$store.commit('del_token');

router.replace({

path:
'/login',

query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面

})

}

}

// Notification.error({

// title:"发送失败",

// message:error.message

// })

let loading = Loading.service({

fullscreen:
true,

text:
'拼命加载中...',

});

loading.close();

return Promise.reject(error.response.data)

});

// const obj = Axios.create({

// headers: {

// 'Authentication-Token': store.state.token

// },

// });

Axios.defaults.headers.common['Authentication-Token'] = store.state.token;

// Vue.prototype.$OBJ = obj

Vue.prototype.$axios = Axios

//
跨域请求问题

Vue.prototype.HOST =
"/api"

Vue.use(Vuex)

Vue.use(Element)

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

el:
'#app',

render: h => h(App),

router,

store,

components: {App},

template:
'<App/>'

});

以******以内部分为主，以上步骤就可以做到 数据加载时，显示loading效果啦！数据加载出来，loading效果消失。

楼主还在踩坑当中。。。。。。。