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.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效果消失。

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


  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值