loading怎么关闭 vant_vue vant封装全局loading加载(全局监听)

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

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

前言：

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

第一步：

建立loading.vue

加载中...

export default {

props: {},

data() {

return {};

},

computed: {},

created() {},

mounted() {},

};

第二步：

app.vue引入 增加开关

代码：

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

vue vant封装全局loading加载(全局监听)相关教程