编写全局loading效果

如果数据量很大的时候，可能list就会暂时没有数据，这时候需要加入loading来提示用户数据正在加载中。

一、在src/utils/myaxios.js中导入element ui 的loading

import axios from 'axios'
import {Loading} from "element-ui"

const myaxios = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 5000,
    
})

const loading = {
    loadingInstance:null,
    open:function(){
        this.loadingInstance = Loading.service({
            target:'.main',
            text:'玩命加载中',
            background:'rgba(0,0,0,0.8)'
        });
    },
    close:function(){
        if(this.loadingInstance!=null){
            this.loadingInstance.close()
        }
        this.loadingInstance==null
    }
}

//请求拦截器
myaxios.interceptors.request.use(function(config){
    loading.open();
    return config
},function(error){
    loading.close();
    return Promise.reject(error)
})  

//响应拦截器
myaxios.interceptors.response.use(function(response){
    loading.close();
    return response
},function(error){
    loading.close();
    return Promise.reject(error)
})  

export default myaxios