axios 拦截器显示和关闭Loading

使用Loading分为2种情况，第一种是使用一些组件库自带的loading，另一种是使用我们自己写的loading，现分开介绍使用方法

 

一、使用element ui 带的Loading

1、在main.js 中引入axios 和elementui

// 引入element-ui 组件 import ElementUI from 'element-ui' // 引入element-ui 样式文件 import 'element-ui/lib/theme-chalk/index.css' import axios from "axios" vue.use(ElementUI) vue.prototype.$axios = axios

2、在main.js 中设置Loading 显示和关闭函数

let loading; function startLoading() { //如果根实例设为变量VUE var VUE = new Vue({}) 也可写成下面的 // loading = VUE.$loading({ // lock: true, // text: "拼命加载中...", // background: 'rgba(0,0,0,0.2)' // }) loading = ElementUI.Loading.service({ lock: true, text: "加载中...", background: 'rgba(0,0,0,0.2)' }) } function endLoading() { loading.close() }

3、同样在main.js 中设置请求和响应拦截器

// 请求数据拦截器 axios.interceptors.request.use(config => { console.log("拦截器") startLoading() return config }) // 响应数据拦截器 axios.interceptors.response.use(response => { endLoading() return response })

佛山vi设计https://www.houdianzi.com/fsvi/ 豌豆资源搜索大全https://55wd.com

二、使用自己在页面中写的Loading

1、新建一个loading.vue 组件

<template> <div class="loader"> <div class="loading" id="loading"> <div class="animateWrap"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="text">正在加载</div> </div> </div> </template> <script> // import theme from '@/assets/js/theme/shine.js' export default { data() { return {}; }, methods: {}, mounted(){ var spanli = document.getElementById("loading").getElementsByTagName("span"); for(var i=0;i<spanli.length;i++){ spanli[i].style.webkitAnimationDelay = 0.13*i+"s" } } }; </script> <style> .loader { position: fixed; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.3); z-index: 20; } .loading { position: absolute; width: 70px; height: 70px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .loading span { display: inline-block; width: 8px; height: 30px; border-radius: 3px; margin: 3px; background: #5af3f3; -webkit-animation:line-square 1s infinite; } .text{color:#5af3f3;} @-webkit-keyframes line-square{ 0%{ transform:scaleY(1) } 50%{ transform:scaleY(0.3) } 100%{ transform:scaleY(1) } } </style> 

2、在App.vue 引入注册并使用loading.vue组件

<template> <div id="app"> <ul class="nav" ref="nav"> <router-link tag="li" :to='{name:"home"}'>首页</router-link> <router-link tag="li" :to="{name:'chart'}">图表</router-link> <router-link tag="li" :to="{name:'exportTable'}">表格</router-link> <router-link tag="li" :to="{name:'formTest'}">表单测试</router-link> <router-link tag="li" :to="{name:'layoutContainer'}">布局容器</router-link> </ul> {{message}} <router-view /> <Loading v-if="this.$store.state.loadingShow" /> </div> </template> <script> import Loading from "@/components/loading.vue" export default { name: 'App', data(){ return{ } }, components:{Loading}, } </script>

3、在store 中初始化loadingShow

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { loadingShow:false }, mutations: { }, actions: { }, modules: { } })

4、在main.js中设置请求和响应拦截器

// 请求数据拦截器 axios.interceptors.request.use(config => { console.log("拦截器") //startLoading() store.state.loadingShow = true return config }) // 响应数据拦截器 axios.interceptors.response.use(response => { //endLoading() store.state.loadingShow = false return response })