全局统一添加loading

您所在的位置:网站首页 axios拦截器实现加载 全局统一添加loading

全局统一添加loading

2024-01-03 08:28| 来源: 网络整理| 查看: 265

首先是全局状态管理store:

1.1 因为页面加载不一定只有一个接口,所以要把需要loading的请求全局保存一下 - requestingObj

1.2 loading是个遮罩,如果直接加在整个页面上,我想切换页面的话前提是这个页面的loading结束才能切换,体验效果差,故loading加在哪里?需要指定dom,所以我们可以通过在路由配置中添加此dom,因此就有了另一个变量 - route

这里为什么不直接在使用route的地方(axios拦截器)直接用useRoute方法直接获取呢?具体方法如下:

import { useRoute } from 'vue-router'; ​ const route = useRoute();

这不就有了么?!

因为useRoute必须在setup()中使用,所以这里用store中转了一下(官网说明),store的存储是在router.afterEach中处理的。

然后是axios:

2.1 拦截器的逻辑就和我们最开始说的思路是一致的,请求拦截中将若存在需要loading的请求,则显示loading,另外需要将其存一下,因为有可能,很有可能不止一个请求,所以需要在请求结束后(响应拦截)将其删掉,直到所有请求都结束才取消loading

2.2 api中将需要loading的请求添加loading字段

最后是路由:

3.1 拦截器中,在页面切换后取消所有loading,此时也需要更新route信息,为了获取loading的容器route.meta.loadingContainerDom

3.2 路由配置中在meta标签中添加容器loadingContainerDom



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3