vuex+axios+element-ui實現頁面請求loading操作示例

本文實例講述了vuex+axios+element-ui實現頁面請求loading操作。分享給大家供大家參考，具體如下：

前言

我們在平常寫項目的時候，發請求的時候肯定會習慣用一個 loading 遮罩層來防止用戶在沒拿到數據之前誤操作

如果是頁面同時只發送一個請求，那么無論是在組件中或者是在 axios 插件中進行請求和響應攔截都可以做到

但是，當一個頁面同時要發送多個請求的時候，這么做顯然就不行了

因為最先完成的請求會把所有請求的 loading 都給關閉

舉個例子，第一個請求的響應時間為 3s ，第二個請求的響應時間為 1s ，兩個同時請求的時候，loading 會開始

但是當 1s 后第二個請求完成后，會直接關閉 loading，但是此時第一個請求還沒完成，所有這樣肯定是不行的

今天就用這篇文章來介紹下我在項目中是怎么應對這種情況的

一、用到的東西

1. element-ui 的 loading
2. vuex 的狀態管理
3. axios 的請求攔截和響應攔截

二、實現

其實這個思路很簡單，就是通過 vuex 來管理請求的個數，假如用 apiCount 這個變量來代表請求的個數，每次請求的時候打開 loading 并且 apiCount  加一，每次響應完成或者失敗的時候都讓 apiCount 減一，并且檢測 apiCount 變量的值，當為 apiCount=0 的時候，就關閉 loading 就可以了，代碼如下：

store.js 代碼（用來管理 vuex）

1. import Vue from "vue";
2. import Vuex from "vuex";
3. import { Loading } from "element-ui";
4. Vue.use(Vuex);
5. const state = {
6. //請求計數
7. apiCount: 0,
8. //loading實例
9. loadingInstance: null,
10. };
11. const mutations = {
12. /* 打開Loading */
13. startLoading(state, msg) {
14. state.loadingInstance = Loading.service({
15. lock: true,
16. text: msg ? msg : "加載中...",
17. background: "rgba(0, 0, 0, 0.7)"
18. });
19. },
20. /* 關閉loading */
21. closeLoading(state) {
22. state.loadingInstance.close();
23. },
24. /* 更新請求線程池 */
25. updateApiCount(state, handle) {
26. if (handle == "add") {
27. state.apiCount++;
28. this.commit("startLoading");
29. } else {
30. state.apiCount--;
31. if (state.apiCount <= 0) {
32. this.commit("closeLoading");
33. }
34. }
35. }
36. };
37. const store = new Vuex.Store({
38. state,
39. mutations
40. });
41. export default store;
42.  

request.js 代碼（封裝 axios 的文件）

1. import axios from "axios";
2. import { Message } from "element-ui";
3. import store from "../store/index";
4. import router from "../router/index";
5. const service = axios.create({
6. baseURL: process.env.VUE_APP_BASE_URL,
7. timeout: 0
8. });
9. service.interceptors.request.use(
10. config => {
11. store.commit("updateApiCount", "add");
12. return config;
13. },
14. error => {
15. store.commit("updateApiCount", "sub");
16. Promise.reject(error);
17. }
18. );
19. service.interceptors.response.use(
20. response => {
21. store.commit("updateApiCount", "sub");
22. return response.data;
23. },
24. error => {
25. store.commit("updateApiCount", "sub");
26. return Promise.reject(error);
27. }
28. );
29. export default service;
30.  

好了，這樣就做到了請求的時候自動打開 loading，所有的請求結束才會關閉 loading 了，無論同時多少個請求都可以

希望本文所述對大家vue.js程序設計有所幫助。