多并发请求，如何控制唯一的loading关闭

发表于 | 更新于:

在单页面中，一个页面可能发送多个请求，如何控制在多个请求都完成了之后才关闭唯一的遮罩，而不是在返回一个遮罩之后就关闭遮罩，可能这时候还有一些接口还未返回，影响用户体验。

解决方法：
在vuex中，设置一个state属性: loading: 0;
mutation中：

1
2
3
4
5
6
7
[types.CHANGE_LOADING](state, payload) {
        if (payload === true) {
            state.loading++;
        } else if (payload === false) {
            state.loading--;
        }
    },

在封装的httpAxios中，在get、post方法中增加一个mask属性，在调用时，传入true/false,表明是否需要遮罩，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
get(url, mask, param) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'get',
            url,
            mask,
            params: param,
            cancelToken: new CancelToken(c => {
                cancel = c
            })
        }).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err);
        })
    })
},

//修改mutation
function handleLoading(val) {
  store.commit('CHANGE_LOADING', val);
}

在axios的interceptors.request中，判断mask是否为真，如果为真的话就loading++，表明请求需要遮罩；

1
2
3
if (config.mask) {
  handleLoading(true);
}

interceptors.response 中，判断mask是否为真，如果为真的话就loading–，表明该请求完成；

1
2
3
if (config.mask) {
  handleLoading(false);
}

最后，因为loading++的值会被loading–减到0，说明所有的请求都完成了，那么在loading组件中，设置v-show=’loading>0’ ，这样就可以控制多个请求都返回了才隐藏遮罩。