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

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

Felery

7055人浏览 · 2018-03-15 16:41:09

Felery · 2018-03-15 16:41:09 发布

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

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^