手把手带你用vue实现全屏loading插件
## 前言：
由于我们打开网页时，浏览器与服务器交互需要时间，受限于宽带以及服务器性能，导致用户在访问一个网页时，往往需要一个等待期，才能在浏览器中真正完全展示出网页内容。在网页加载过程中网页就是一片空白，对于我们用户而言，我们看到一片空白，还以为网站 "挂掉了"，就很忧伤！！
当然了，我们针对这个问题，各大网站都有自己的解决方案。
有的网站会用骨架屏。
比如掘金:利用骨架屏，给用户提醒，网站内容马上呈现给您，不要着急!
有的网站会选择在数据出来之前 定义一个全屏的loading，提供用于网站正在加载
比如：网站在加载时以及网站刷新时，会弹出全屏loading。
## 文章目的：
今天我们就要带大家实现，在vue开发的前后端分离应用中，实现在网页加载以及刷新时，实现如上图全屏loading的效果!
### 功能分析
vue项目中所有的请求一般都是通过axios，所以我们需要给axios新增请求和响应拦截，在请求拦截中显示loading,和响应拦截中关闭loading。
所以我们需要定义两个全局方法，一个是显示loading，叫$showLoading(),另一个叫$hideLoading()关闭全屏loading。
### 代码实现
上面的梳理，我们明确了，需要定义两个全局方法，一个显示loading一个关闭loading，这里我们定义一个Vue的插件通过插件动态给实例安装 显示和关闭Loading方法。
- 定义$loading插件，在Vue构造函数原型上添加两个方法
以下loading.js代码
```text
const $loading = {
install: (Vue) => {
// 添加 显示loading方法
Vue.prototype.$showLoading = () => {
console.log('loading显示')
}
// 添加关闭loading方法
Vue.prototype.$hideLoading = () => {
console.log('loading关闭')
}
}
}
export default $loading;
// 使用时 在main.js入口函数中引入 使用插件即可安装
Vue.use($loading)
```
- 添加axios请求和响应拦截，调用显示和关闭loading方法
```text
import Vue from 'vue'
// 定义Vue实例 调用全局显示和关闭loading方法
const vm = new Vue()
// 请求拦截
axios.interceptors.request.use(function (config) {
// 在这里调用 显示loading方法
vm.$showLoading()
return config
}, function (error) {
vm.$hideLoading()
// 在请求出错调用 关闭loading方法
return Promise.reject(error)
})
// 响应拦截
axios.interceptors.response.use(function (response) {
// 在这里调用 关闭loading方法
vm.$hideLoading()
return response
}, function (error) {
// 在这里调用 关闭loading方法
vm.$hideLoading()
return Promise.reject(error)
}
```
此时首页有三次请求，显示了三次loading显示和loading关闭！
当然我们 在数据请求不是打印，而是 显示loading，数据过来时应该关闭loading,所以接下来我们实现这两个效果
- 通过单文件组件 定义显示loading结构
我们目前的问题是，在显示loading时不是打印而是要显示全局loading的html结构，在关闭loading时要隐藏!
为了实现这个需求，我们通过vue的单文件组件来定义loading的html结构和控制loading显示隐藏
loading.vue
```text
<template>
<!--
mask是loading的背景 v-show控制loading显示消失
-->
<div class="mask" v-show="isShow">
<div class="loading"></div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
// loading默认不显示
isShow: false
}
}
}
</script>
<style lang="scss">
// 定义动画 控制 loading旋转
@keyframes rotate {
0%{
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.mask{
position: fixed;
left:0;
right:0;
top:0;
bottom:0;
background-color: rgba(0,0,0,.7);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
.loading{
width: 30px;
height: 30px;
border: 6px solid rgb(219, 140, 13);
border-radius: 21px;
border-left-color:transparent;
animation: rotate 500ms infinite;
}
}
</style>
```
- loading.js中获取单文件组件 html结构 并在 $showLoading方法调用时显示,在$hideLoading时隐藏
loading.js中
```js
import LoadingVue from './loading.vue'
const $loading = {
install: (Vue) => {
// 通过 Vue.extend方法 获取LoadingComponent 组件 类
const LoadingComponent = Vue.extend(LoadingVue);
// new LoadingComponent得到组件的实例
const vm = new LoadingComponent();
// 获取组件实例的html 并插入到body中
const tpl = vm.$mount().$el;
// 插入到body中
document.body.appendChild(tpl);
// 添加 显示loading方法
Vue.prototype.$showLoading = () => {
// 通过改变实例 .mask v-show绑定变量控制显示
vm.isShow = true
}
// 添加关闭loading方法
Vue.prototype.$hideLoading = () => {
// 通过改变实例 .mask v-show绑定变量控制隐藏
vm.isShow = false
}
}
}
```
最后在main.js中使用插件 在axios拦截器中控制显示隐藏就ok啦！！
main.js
```js
import Vue from 'vue'
import loading from './plugins/loading'
Vue.use(loading)// 构造函数原型上就添加了$showLoading和$hideLoading方法
```
axios拦截器中使用
```js
import Vue from 'vue'
// 定义Vue实例 调用全局显示和关闭loading方法
const vm = new Vue()
// 请求拦截
axios.interceptors.request.use(function (config) {
// 在这里调用 显示loading方法
vm.$showLoading()
return config
}, function (error) {
vm.$hideLoading()
// 在请求出错调用 关闭loading方法
return Promise.reject(error)
})
// 响应拦截
axios.interceptors.response.use(function (response) {
// 在这里调用 关闭loading方法
vm.$hideLoading()
return response
}, function (error) {
// 在这里调用 关闭loading方法
vm.$hideLoading()
return Promise.reject(error)
}
```
是不是很棒，好啦我们的vue全屏loading插件到这里就完成了，小伙伴们回去试一试吧。
更多关于web培训的问题，欢迎咨询千锋教育在线名师。千锋教育拥有多年IT培训服务经验，采用全程面授高品质、高体验培养模式，拥有国内一体化教学管理及学员服务，助力更多学员实现高薪梦想。
