Vue+antd中关于发送请求时候的Loading遮罩层闪烁无法覆盖问题

需求：在发送请求的时候需要给全局加loading样式，初步实现在App.vue中直接包裹整个router-view，然后监听vuex中的值，值在封装axios的时候，即请求拦截以及响应请求的时候改变

App.vue

    <div id="app"><a-spin :spinning="LOADING_PAGE" size="large"><router-view /></a-spin></div>setup() {const store = useStore();const LOADING_PAGE = computed(() => {return store.getters.LOADING_PAGE;});return { LOADING_PAGE};},

request.ts

// 请求拦截
service.interceptors.request.use((config) => {store.commit("MDF_LOADING_PAGE", true);
}
// 响应拦截（以及失败也要更改MDF_LOADING_PAGE）
service.interceptors.response.use((response) => {store.commit("MDF_LOADING_PAGE", false);
}

问题：如果在Modal中也有table列表请求的时候，Modal的层级可能会覆盖loading
所以我们需要两个loading，分别用在全局和Modal中，然后我们写两个值分别控制这个loading样式，然后在Modal中就不需要全局的loading，我们在request.ts更改一下即可

// 请求拦截
service.interceptors.request.use((config) => {if (!store.getters.LOADING_MODAL) {store.commit("MDF_LOADING_PAGE", true);}
}
// 响应拦截（以及失败也要更改MDF_LOADING_PAGE）
service.interceptors.response.use((response) => {store.commit("MDF_LOADING_PAGE", false);store.commit("MDF_LOADING_MODAL", false);
}

Modal页面

  <a-spin :spinning="LOADING_MODAL" size="large">...</a-spin>setup() {const store = useStore();const LOADING_MODAL= computed(() => {return store.getters.LOADING_MODAL;});return { LOADING_MODAL};},

Vue+antd中关于发送请求时候的Loading遮罩层闪烁无法覆盖问题相关推荐

vue element admin中发送请求和设置loading效果
需求:在表格数据加载完成前进入loading显示数据正在加载,数据加载完成后取消loading效果,axios的超时处理和异常的处理之后进行取消loading效果. 小编接下来就根据这个这个需求进行分 ...
jmeter利用取样器中http发送请求（2）·
使用Jmeter发送HTTP请求取样器是用来模拟用户操作,向服务器发送请求以及接收服务器的响应数据的一类元件,其中HTTP请求取样器是用来模拟常用的http请求的步骤如下: 步骤一:添加线程组 ...
angularJs中的发送请求例子
$http({ //发送请求 url: 'http://localhost:8080/teacher/api/login', method: 'post', data: obj }) .success ...
[配置]集中管理Vue项目中的http请求
需求: 项目中难免有多个http请求,如果分散在各个页面中,对于查看和修正都极其不便,所以想对他们进行集中管理: 分析: 思路1:做一个普通的service,用文件http.api.js集中存放htt ...
vue+axios中的get请求传参，post请求头（form/json）不一样的传参的处理
<script>需要引入 import axios from 'axios' import Qs from 'qs'(如果只是get请求就不需要引qs) 1.正常get请求: v ...
vue AntD中栅格布局的四种大小xs,sm,md,lg
cssBootstrap栅格布局的四种大小xs,sm,md,lg 前端为了页面在不同大小的设备上也能够正常显示,通常会使用栅格布局的方式来实现. 使用bootStrap的网格系统时,常见到一下格式的类 ...
如何封装axios请求。统一基地址、加载遮罩层、响应参数优化
gitee地址:https://gitee.com/mengxianchen/axios-request-tool 线上体验地址: http://121.43.41.227:82/ 浏览器网络设 ...
vue中axios封装请求
执行 GET 请求 // 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (res) {console.log(res); }) . ...
一、在vue项目中使用mock.js（详解）
步骤1.搭建测试项目步骤1.1创建项目命令: vue create mock-demo 步骤1.2安装依赖命令: #使用axios发送ajax cnpm install axios--save ...

Vue+antd中关于发送请求时候的Loading遮罩层闪烁无法覆盖问题

Vue+antd中关于发送请求时候的Loading遮罩层闪烁无法覆盖问题相关推荐

最新文章

热门文章