VUE動態(自動)Loading【繫結到URL】，同頁面多個Loading互不衝突

蔣具巨集發表於2019-07-22
Vue

需求來源：當使用React時，使用 umi loading 很方便，頁面對http請求發生改變時，也會自動改變loading的相關狀態(true/false)

對VUE外掛進行找尋，發現沒找到合適內容，就參考思路自行設計了一套

功能實現

介面Loading自動載入，不需要在每個請求前後進行攔截，且配置簡單、實現方便，如圖：

 

技術棧

vue、vuex、axios(http請求)

 

開始實現

 第一步，檔案目錄結構介紹：

　　lib/http:　Http封裝，對系統請求進行封裝

　　service/api.js: 請求介面提取(統一管理請求URL，詳細內容見右)

　　store.js: 全域性狀態

第二步，介面統一提取(service/api.js)

　　如上是提取的統一URL內容，使用時直接引入

第三步，全域性狀態封裝(store.js)

 1 import Vue from "vue";
 2 import Vuex from "vuex";
 3 import * as Service from '@/service/api';
 4 
 5 Vue.use(Vuex);
 6 
 7 // 實現自動註冊loading URl
 8 const loading = {};
 9 Object.values(Service.URLS).forEach(value => {
10     loading[value] = false;
11 });
12 
13 export default new Vuex.Store({
14     state: {
15         // url請求列表，自動註冊
16         loading: loading
17     },
18     mutations: {
19         loading(state, url) {
20             state.loading[url] = true;
21         },
22         unloading(state, url) {
23             state.loading[url] = false;
24         }
25     },
26     actions: {}
27 });

第四步，Http封裝

 1 import axios from 'axios';
 2 import store from '../../store'
 3 
 4 
 5 /**
 6  * 設定請求字首(末尾必須包含 / 否則會導致動態loading失敗)
 7  */
 8 axios.defaults.baseURL = "http://www.huic.top/";
 9 
10 /**
11  * 定義一個請求攔截器（Loading設定true）
12  */
13 axios.interceptors.request.use(function (config) {
14     store.commit("loading", config.url);
15     return config
16 });
17 /**
18  * 定義一個響應攔截器（Loading設定為false）
19  */
20 axios.interceptors.response.use(function (response) {
21     store.commit("unloading", response.config.url.replace(axios.defaults.baseURL, ""));
22     return response
23 });

這裡的封裝只封裝了攔截器，並未對具體請求進行封裝，因為請求封裝在這裡可有可無，如需要的請聯絡郵箱：690717394@qq.com 

第五步，使用

 1 <script>
 2     import './index.less';
 3     import * as Service from '@/service/api';
 4 
 5     export default {
 6         data: () => ({
 7             // 題目標籤
 8             tags: [],
 9         }),
10         computed: {
11             tagLoading() {
12                 return this.$store.state.loading[Service.URLS.ARTICLE_TAG_LEVEL];
13             },
14             testLoading() {
15                 return this.$store.state.loading[Service.URLS.ARTICLE_TEST];
16             }
17         },
18         created() {
19             this.queryTags();
20         },
21         components: {
22         },
23         methods: {
24             /**
25              * 查詢標籤列表(請求封裝查詢，也可直接使用 axios.post 等內容)
26              */
27             queryTags() {
28                 Service.articleTagLevel({}).then(res => {
29                     if (res.isOk()) {
30                         this.tags = res.data.records;
31                     }
32                 });
33             }
34         }
35     };
36 </script>

以上程式碼為VUE簡單使用，則將loading - url - 元件進行繫結，則代表在本頁面進行請求，例如：articleTagLevel，則會自動繫結loading(見12行)

以上核心程式碼為10-17行，代表將url和loading屬性繫結，使用方法見下：

 1 <div class="test-body-item">
 2     <Row>
 3         <Col span="2" class="test-body-item-title">
 4             標籤選擇
 5         </Col>
 6         <Col span="21" offset="1">
 7             <TagGroup :data="tags" :loading="tagLoading"/>
 8         </Col>
 9     </Row>
10 </div>

使用方法：第 7 行，其中 :loading="tagLoading" 則代表將tagLoading屬性繫結到loading引數中

至此，實現成功.

End.

相關文章