axios+vue+element-ui以服务端方式动态加载loading
最近在开发公司的后台界面,因为要前后端分离,所以就用了Vue这个非常火的框架,前端界面就用的饿了么团队的开源组件element-UI,界面非常看好,设计的也挺人性化,大大缩短了前端开发周期。但这今天遇到个问题,就是当我点击侧边栏的选项时,右侧根据api渲染的数据有一个3秒钟的延迟,恐怕像我这种强迫症的人忍受不了的,所以就看到了,element-ui中的loading加载动画,通过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.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); }); // 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}//登录成功后跳入浏览的当前页面 }) } } let loading = Loading.service({ fullscreen: true, text: '拼命加载中...', }); loading.close(); return Promise.reject(error.response.data) }); Vue.prototype.$axios = Axios // 跨域请求问题 Vue.prototype.HOST = "/api" Vue.use(Vuex) Vue.use(Element) Vue.config.productionTip = false new Vue({ el: '#app', render: h => h(App), router, store, components: {App}, template: '<App/>' });
以******以内部分为主,以上步骤就可以做到 数据加载时,显示loading效果啦!数据加载出来,loading效果消失。
楼主还在踩坑当中。。。。。。。
更多推荐
已为社区贡献4条内容
所有评论(0)