vue 通过axios实现全局loading
要求
当页面存在axios请求时,显示loading图标,当所有axios请求完成时,隐藏loading图标
实现原理
通过axios request拦截器(发起请求时触发) 与 axios response拦截器(请求完成时触发),控制loading图标图标显隐
/main.js 添加这两个拦截器,需要引入jquery;
import $ from 'jquery' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) //axios 实现loading //axios request拦截器 axios.interceptors.request.use(function (config) { $('.loading').fadeIn(); let process = $('.loading').attr('process')*1+1; $('.loading').attr('process',process); return config; }, function (error) { return Promise.reject(error); }); //axios response拦截器 axios.interceptors.response.use(data => { let process = $('.loading').attr('process')*1-1; $('.loading').attr('process',process); if(process == 0){ $('.loading').fadeOut(); } return data }, error => { return Promise.reject(error); })
loading组件代码
<template> <div process="0" class="loading"><van-loading type="spinner" /></div> </template> <script> import Vue from 'vue'; import { Loading } from 'vant'; Vue.use(Loading); export default { name: 'Loading', components:{ Loading }, } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .loading{ display: none; position: fixed; width:60px; height: 60px; margin:-30px 0 0 -30px; background:rgba(0,0,0,0.5); z-index: 9999; top:50%; left:50%; text-align: center; line-height:60px; border-radius: 5px; } </style>
/App.vue 添加loading组件 <Loading></Loading>
<template> <div id="app"> <router-view/> <div class="support"> <p>51助手网提供技术支持</p> </div> <Loading></Loading> </div> </template>
当有些页在请求失败时,会导至loading一直显示,所以在路由后置函数中,初始化一下loading
//router后置钩子函数 router.afterEach((to,from)=>{ $('.loading').attr('process',0); //初始化loading })