axios 攔截器顯示和關閉Loading
- 2019 年 12 月 15 日
- 筆記
使用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 })
二、使用自己在頁面中寫的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 })
