全局加载效果思路

在vue里面对代码实现发送发送请求的时候添加加载效果，不论是使用axios还是ajax发送请求，思路都是一样：
1、调用组件框架的时候生成一个加载效果
2、消息返回的时候把加载效果删除

面临的问题

同一时段或上一次请求未结束来了新的请求应该怎么解决，是来几个请求就生成几个加载效果？还是全局就一个加载效果？
答案肯定是全局就一个加载效果，全局一个加载实例的时候怎么解决两个请求同时发出，当加载时间快的那个加载完了如何避免关闭加载效果。

实现方式

1、以axios搭配elementui为例：

首先定义axios拦截器，在拦截器里面定义全局变量，每次请求来的时候就进对请求次数加一，每次请求结束就对请求计数减一。

    // 当前请求的个数
    let requestCount = 0;
    // 加载效果的实例
    let loadingInstance = null;
    
    // 添加请求拦截器
    axios.interceptors.request.use(
        function (config) {
            // requestCount=0表示当前没有请求开启加载效果，则马上开启加载效果
            if(requestCount == 0) {
                loadingInstance = Loading.service(options);
            }
            // 每次请求计数+1
            requestCount += 1;
            
            return config;
        },
        function (error) {
            // 当出现异常的时候计数-1
            requestCount -= 1
            // 当加载实例存在且计数小于等于0的时候把加载效果关闭
            if(requestCount <= 0 && loadingInstance ) {
                requestCount = 0
                loadingInstance.close() 
            }
            
            // 对请求错误做些什么
            return Promise.reject(error);
        }
    );

    // 添加响应拦截器
    axios.interceptors.response.use(
        function (response) {
            // 当请求返回的时候计数-1
            requestCount -= 1
            // 当加载实例存在且计数小于等于0的时候把加载效果关闭
            if(requestCount <= 0 && loadingInstance ) {
                requestCount = 0
                loadingInstance.close()
            }
            return response;
        },
        function (error) {
        		 // 当响应出现异常的时候计数-1
            requestCount -= 1
            // 当加载实例存在且计数小于等于0的时候把加载效果关闭
            if(requestCount <= 0 && loadingInstance ) {
                requestCount = 0
                loadingInstance.close() 
            }
            return Promise.reject(error);
        }
    );

此处列出了elementui的示例，使用其他ui框架，比如vant等只需要修改生成加载效果的实例和关闭效果的实例就行

如果不使用拦截器，实现的效果也大同小异，请求的时候对计数+1，请求异常或者请求成功后对计数-1，当计数大于等于0的时候生成加载效果，计数小于等于0的时候删除加载效果