vue 全局封装loading加载(全局监听)

红太狼 2022-12-07 15:08 258阅读 0赞

**前言：**  
为了页面美观，请求接口的时候延迟没有数据，页面感觉狠卡顿，封装loading，请求接口成功后隐藏掉（我这是用的vant 组件根据自己情况进行改变）。

**第一步：**  
建立loading.vue

<template>
      <div class="loading">
        <van-loading size="36px" vertical>加载中...</van-loading>
      </div>
    </template>
    
    <script>
    export default { 
      props: { },
      data() { 
        return { };
      },
      computed: { },
      created() { },
      mounted() { },
    };
    </script>
    
    <style scoped>
    </style>

**第二步：**  
app.vue引入 增加开关  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70_pic_center 1]  
**代码：**

<loading v-show="isLoading"></loading>
    
    
    import {  mapState } from "vuex";
    import loading from "./components/loading";
    
    
      computed: { 
        ...mapState(["isLoading"])
      },
      components: { 
        loading
      },
    
    //css
    .loading { 
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      position: fixed;
      padding-top: 5.333333rem;
    }

**第三步：**  
vuex 保存状态

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    const store = new Vuex.Store({ 
    	state: { 
    		isLoading: false//loading全局开关
    	},
    	mutations: { 
    		changeisLoading(state, data) { 
    			state.isLoading = data
    		}
    	},
    })
    
    export default store

**第四步：**  
监听接口状态，全局改变isLoading状态（main.js引入或者自己在引入一个js）

// 请求拦截器
    axios.interceptors.request.use(
    	config => { 
    		// 改变vuex中的isLoading状态数据，当为true，loading显示
    		store.state.isLoading = true
    		return config;
    	},
    	error => { 
    		return Promise.error(error);
    	}
    );
    
    // 响应拦截器
    axios.interceptors.response.use(
    	response => { 
    		// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
    		// 否则的话抛出错误
    		if (response.status === 200) { 
    			//loading隐藏
    			store.state.isLoading = false
    			return Promise.resolve(response);
    		} else { 
    			return Promise.reject(response);
    		}
    	},
    	error => { 
    		if (error.response.status) { 
    			return Promise.reject(error.response);
    		}
    	}
    );

OK 封装完成！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/b2c2b139637e41d8b7598a0078b5ba7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/468a63c50e124ba1a14200212abef1c9.png