vue和element全局loading

Posted 2021-02-13 asnow

http请求的代码如下：

import axios from ‘axios‘
import { Message} from ‘element-ui‘
import store from ‘../store‘ //vuex
import { getToken } from ‘@/utils/auth‘ //token

// 创建axios实例

const service = axios.create({
    //baseURL: "https://www.cnblogs.com", // api的base_url
    timeout: 5000 // 请求超时时间
})

//http request 拦截器
service.interceptors.request.use(
 
  
    config => {
      config.headers = {
        ‘Content-Type‘:‘application/x-www-form-urlencoded‘,
        ‘X-Token‘:getToken()
      }
      if(store.state.neddloding==0){ //等于0打开loading

        store.commit(‘gbfullscreenLoading‘)
        
      }
        store.commit(‘show‘)//每开始一次请求neddloding加一
        console.log(store.state.neddloding)
      
      return config;
    },
    error => {
      return Promise.reject(err);
    }
  );

//响应拦截器即异常处理
service.interceptors.response.use(response => {
    console.log(response)
    //store.commit(‘gbfullscreenLoadinga‘)
    //hide()
    
    return response
}, err => {
    if (err && err.response) {
       
      switch (err.response.status) {
        case 400:
            //console.log(‘错误请求‘)
            Message({message: ‘错误请求‘, type: ‘error‘});
          break;
        case 401:
            console.log(‘未授权，请重新登录‘)
          break;
        case 403:
          console.log(‘拒绝访问‘)
          break;
        case 404:
          console.log(‘请求错误,未找到该资源‘)
          break;
        case 405:
          console.log(‘请求方法未允许‘)
          break;
        case 408:
          console.log(‘请求超时‘)
          break;
        case 500:
          console.log(‘服务器端出错‘)
          break;
        case 501:
          console.log(‘网络未实现‘)
          break;
        case 502:
          console.log(‘网络错误‘)
          break;
        case 503:
          console.log(‘服务不可用‘)
          break;
        case 504:
          console.log(‘网络超时‘)
          break;
        case 505:
          console.log(‘http版本不支持该请求‘)
          break;
        default:
          console.log(`连接错误${err.response.status}`)
      }
    } else {
      console.log(‘连接到服务器失败‘)
    }
    return Promise.resolve(err.response)
})

var that=this;
function fromdata(type, url, data) {
    return new Promise((reslove, reject) => {
    service({
        method: type,
        url: url,
        data: data //java后台用qs转
      })
        .then(res => {
         // store.commit(‘UPDATE_LOADING‘, false); //隐藏loading
          //这里可以添加指定对应状态码的处理方式,比如登陆过期,res.data.code === ‘6666‘ 路由跳转到login
          if(res.data.code==0){
            reslove(res);
            console.log(store.state.neddloding)
              store.commit(‘hide‘) //每完成一次请求减一
            if(store.state.neddloding==0){ //等于0关闭loding
              console.log(store.state.neddloding)
              store.commit(‘gbfullscreenLoadinga‘)
            }
              
            
          }else{
              console.log(res.data.message)
              console.log(res)
            Message({message: ‘错误请求‘, type: ‘error‘});
          }
        })
        .catch(err => {
          //store.commit(‘UPDATE_LOADING‘, false); //隐藏loading
          reject(err.message);
          Message({message: ‘错误请求‘, type: ‘error‘});
          //Message.error(e.message);
        });
    });
  }
 


export default fromdata

store代码

import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex)



var state={
    fullscreenLoading:true,//设置loading是否显示
    neddloding:0//根据是否为0来判断是否关闭loading
}

var mutations={
    gbfullscreenLoading(state){
        state.fullscreenLoading=true;//loading显示
    },
    gbfullscreenLoadinga(state){
        state.fullscreenLoading=false;//loading关闭
    },
    show(state){//每请求一次加一
        state.neddloding++
    },
    hide(state){//每完成请求一次减一
        state.neddloding--
    }

}


export default new Vuex.Store({
    state,
    mutations
})

app.vue中设置loading

<template>
    <div id="app" v-loading.fullscreen.lock="fullscreenLoading">
        <router-view></router-view>
    </div>
</template>
<script>
export default {
   
    computed:{
        fullscreenLoading(){
            return this.$store.state.fullscreenLoading
        }
    }
}
</script>