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

前言：
为了页面美观，请求接口的时候延迟没有数据，页面感觉狠卡顿，封装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引入 增加开关


代码：

<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 封装完成！