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程序设计有所帮助。