【Vue实战】Vuex 和 Axios 拦截器设置全局 Loading

目录

1. 效果图

 2. 思路分析

 2.1 实现思路

2.2 可能存在的问题

2.2.1 并发请求管理

2.2.2 请求快速响应和缓存带来的问题

3. 代码实现

4. 总结 

1. 效果图

如下图所示，当路由变化或发起请求时，出现 Loading 等待效果，此时页面不可见。当路由跳转结束或请求结束时，Loading效果隐藏，页面可见。

 2. 思路分析

接下来从思路和难点入手分析，最终代码实现，解决问题。

 2.1 实现思路

(1) 需要有一个 Loading.vue 组件，可以自己写，也可以用组件库中的组件。

(2) 创建 vuex，通过 vuex store 来管理一个 loading 状态。

(3) 需要在 store 中定义一个计数器，用来追踪正在请求的数量。

(4) 使用 Axios 拦截器，在每次请求开始的时候增加计数器，在请求完成的时候减少计数器。

(5) 根据计数器的值来控制 loading 状态，进而控制 Loading.vue 组件的显示隐藏。

2.2 可能存在的问题

2.2.1 并发请求管理

描述：当应用程序中有多个并发请求时，简单的开始和结束 loading 状态的方式可能会导致 loading 状态提前结束或不正确地显示。例如，如果在 endloading  被调用时还有其他请求未完成，loading 状态应该保持为 true。

参考方法：使用计数器追踪请求数量，如上述所说，Vuex store 中引入一个计数器来追踪正在进行中的请求数量。每次发起请求时增加计数器，请求完成后减少计数器。只有当所有请求都完成后（即计数器归零），才将 loading 置为 false。

2.2.2 请求快速响应和缓存带来的问题

描述：由于网络速度较快或浏览器缓存的原因，某些请求可能会非常快地完成，导致 loading 状态几乎不显示。此外，浏览器可能会从缓存中获取资源，从而绕过了正常的请求流程，使得 loading 状态没有机会被触发。

参考方法：在 endLoading 中引入一个最小延迟（我设置的 300 毫秒）。这样即使请求很快完成，loading 指示器也会显示足够长的时间让用户注意到。可以使用