## 前言：

由于我們打開網頁時，瀏覽器與服務器交互需要時間，受限于寬帶以及服務器性能，導致用戶在訪問一個網頁時，往往需要一個等待期，才能在瀏覽器中真正完全展示出網頁內容。在網頁加載過程中網頁就是一片空白，對于我們用戶而言，我們看到一片空白，還以為網站 "掛掉了"，就很憂傷！！

當然了，我們針對這個問題，各大網站都有自己的解決方案。

有的網站會用骨架屏。

比如掘金:利用骨架屏，給用戶提醒，網站內容馬上呈現給您，不要著急!

有的網站會選擇在數據出來之前 定義一個全屏的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培訓服務經驗，采用全程面授高品質、高體驗培養模式，擁有國內一體化教學管理及學員服務，助力更多學員實現高薪夢想。