前言
我们在平常写项目的时候,发请求的时候肯定会习惯用一个 loading 遮罩层来防止用户在没拿到数据之前误操作
如果是页面同时只发送一个请求,那么无论是在组件中或者是在 axios 插件中进行请求和响应拦截都可以做到
但是,当一个页面同时要发送多个请求的时候,这么做显然就不行了
因为最先完成的请求会把所有请求的 loading 都给关闭
举个例子,第一个请求的响应时间为 3s ,第二个请求的响应时间为 1s ,两个同时请求的时候,loading 会开始
但是当 1s 后第二个请求完成后,会直接关闭 loading,但是此时第一个请求还没完成,所有这样肯定是不行的
今天就用这篇文章来介绍下我在项目中是怎么应对这种情况的
一、用到的东西
- element-ui 的 loading
- vuex 的状态管理
- axios 的请求拦截和响应拦截
二、实现
其实这个思路很简单,就是通过 vuex 来管理请求的个数,假如用 apiCount 这个变量来代表请求的个数,每次请求的时候打开 loading 并且 apiCount 加一,每次响应完成或者失败的时候都让 apiCount 减一,并且检测 apiCount 变量的值,当为 apiCount=0 的时候,就关闭 loading 就可以了,代码如下:
store.js 代码(用来管理 vuex)
import Vue from "vue";
import Vuex from "vuex";
import { Load