vue项目中设置全局loading时 遇到多个请求时loading加载显示问题

问题详细描述
项目设置全局loading动画加载，如果页面一次加载了多个请求 ，当其中有一个接口请求成功后 loading加载动画会消失，但是其实 此时还有一个接口还未 请求成功 那么其实加载动画不应该消失的。
解决方法
多个请求 如果有一个请求成功 则加载动画 就会结束 问题（等所有请求都完成才能结束）- 计数 记录需要加载动画的请求（isLoading不是false的）的接口数量 当关闭时 查看请求（isLoading不是false的）的数量是否完全都走过 确定则关闭
请求接口展示

export function getData() {
  return request({
    url: 'order/getData',
    method: 'post',
    headers:{
      isLoading:false//不用使用加载动画loading
    }
  })
};
// 客户白名单
export function getWhiteList(params) {
  return request({
    url: '/whiteList/list',
    method: 'post',
    data:params
  })
};
export function removeWhiteList(params) {
  return request({
    url: '/whiteList/remove',
    method: 'post',
    data:params
  })
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

http.js代码

//插件模块
import axios from 'axios' 
import router from '@/router'
import { Loading,Message} from 'element-ui';//引入Loading服务

//开始加载动画
var loading;
var loadingNum=0 //初始化接口数量
export function startLoading() {
    loading  = Loading.service({
        lock:true, //是否锁定
        text:'Loading...',//加载中需要显示的文字
        // background:'rgba(0,0,0,.7)',//背景颜色
    });
}
//结束加载动画
export function endLoading() {
    loading.close();
}
// 创建axios实例
const service = axios.create({
    baseURL: process.env.BASE_API, // api的base_url 
	timeout: 60000, // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
       if(config.url=='/login'){
        }else{
            if (sessionStorage.getItem('token')) { // 判断是否存在token，如果存在的话，则每个http header都加上token
                config.headers.common['token']=sessionStorage.getItem('token');
                }
        }
    //    查看发送请求的接口有没有设置isLoading
       if(config.headers.isLoading !== false){
        loadingNum++ //记录需要加载动画的接口数量
        startLoading();//请求时的加载动画
       }
	   return config
},error => {
	return Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
	response => {
        if(response.config.headers.isLoading==false){
            // isLoading 为false时 不做任何处理 防止 有接口成功了 将还未请求成功的接口 的加载动画 给结束掉
        }else{
            loadingNum--
            if(loadingNum==0){
                endLoading();//结束加载动画
            }
        }
        return response.data

	},error => {
        if(error.response){
            // token失效
            if(error.response.status==401){
                Message({
                    message: 'token失效,请重新登录',
                    type: "error"
                });
                router.push({name:'login'})
            }else if(error.response.status==404){
                Message({
                    message: '服务错误',
                    type: "error"
                });
            }
        }else if(error.request){
            // 请求超时后 操作
            if(error.request.readyState == 4 && error.request.status == 0){
                Message({
                    message: '超过60000毫秒超时',
                    type: "error"
                });
            }
        }
        loadingNum=0//遇到一个报错 则所有的动画都结束 
        endLoading();//结束加载动画
		return Promise.reject(error)
	}
)

export default service




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92