巧用element ui 的 loading【服務方式】

在後臺系統裏，頻繁地加載數據是常態，因此在等待後臺響應的過程當中，如何統1、最少的代碼來處理加載狀態，多是咱們每一個FE須要考慮的事情，如今我提供一個我的的解決思路

全局引入

使用 npm install element 後，在 main.js 文件裏引入element，能夠完整引入 import ElementUI from 'element-ui';。 也能夠按需引入 import { Loading } from 'element-ui';，引入後Vue.use(Loading);。

全局配置

• 完整引入：Vue.prototype 上有一個全局方法$loading，調用this.$loading(options)能夠返回Loading 實例。
• 局部引入Loading:使用Loading.servie(返回一個 Loading實例)來代替Vue.prototype 的$loading方法,使用Vue.prototype.$loading = Loading.servic.

與vuex結合

由於加載是與後臺請求時觸發的，因此，先處理請求部分：

• 將全部的 api 放在一個 js 文件裏，在 main.js 中全局引入此 js 文件,再在vue.prototype上添加一個新的屬性。

import * as actions from 'vuexx/actions';
Vue.prototype.$actions = actions;
複製代碼

• 在 api 文件內，將每一個 axios 請求抽離出公共的處理部分，而且和vuex結合。

import axios from 'axios';
import VueStore from 'vuexx/vue_store';
import {Message} from 'element-ui';

export const apiGlobalGetResource = (param, callback, fallback) => {
    let options = {method: 'post', data: param, url: 'common/resource_all'};
    // _fullpageLoad用來控制是否loading
    options._fullpageLoad = true;
    return request(options, callback, fallback);
};
const request = (param, callback, fallback) => {
    if (param._fullpageLoad) {
        //這裏和 vuex 結合
        VueStore.commit('setFullpageLoad', true);
    }
    axios(param)
        .then(response => {
            let result = response.data;
            if (result.code === 200) {
                callback(result.data);
            } else {
                console.log('reject == ', result);
                let msg =
                    result.msg || (result.meta && result.meta.error_message);
                if (fallback) {
                    fallback(msg);
                } else if (msg) {
                    Message.error(msg);
                }
            }
            if (param._fullpageLoad) {
                VueStore.commit('setFullpageLoad', false);
            }
        })
        .catch(error => {
            let result = error.response || {};
            if (
                result.status === 502 ||
                result.status === 504 ||
                error.code === 'ECONNABORTED'
            ) {
                window.setTimeout(() => {
                    Message.error({
                        message: '請求超時，請稍後重試',
                        duration: 0,
                        showClose: true
                    });
                }, 100);
            } else {
                console.log('error == ', error);
                fallback && fallback(error);
            }
            if (param._fullpageLoad) {
                VueStore.commit('setFullpageLoad', false);
            }
        });
    return source;
};
複製代碼

• 在 vuex 裏面，處理 setFullpageLoad 便可

const vuStore = new Vuex.Store({
   state: {
       fullLoading: false
   },
   mutations: {
       setFullpageLoad: function(state, status) {
           state.fullLoading = status;
       }
   }
});

export default vuStore;
複製代碼

實例化

如今咱們就能夠在一個 vue 文件裏註冊使用 loading 功能，爲了後期最簡單地增長 loading 狀態，在app.vue裏先用計算屬性，獲得 fullLoading 的值，再 watch 此值進行處理。

computed: {
   ...mapState({
       fullLoading: state => state.fullLoading
   })
},
fullLoading: function(newValue) {
   if (newValue === true) {
       this.loader = this.$loading({
           // Loading 須要覆蓋的 DOM 節點
           target: document.querySelector('.container')
       });
   } else {
       this.loader.close();
   }
}
複製代碼

還有別的屬性能夠配置，更多可查看 Element ui官網

維護

當須要使用 fullLoading 時，在 api 文件裏，新增接口，而且配置 options._fullpageLoad = true;，在須要的地方調用便可，例如：

this.$actions.apixxx(
    param,
    result => {
    },
    err => {
    }
);
複製代碼

以爲不錯的，點個贊哦，歡迎交流～