loading怎么关闭 vant_页面loading解决方案

一个应用不管是App还是PC端打开页面的时候都会有loading,那么loading一般情况下是在页面调取接口数据的时候加载显示,数据加载完之后隐藏loading,那么在加载数据就会有存在几种情况:

一、页面同时只有一个接口请求数据

这种情况下是大多时候出现的,请求开始时显示loading,结束时取消loading,这个目前看起来没有问题

二、页面同时有几个互不相关的接口请求数据

当并列同时请求2个以上的数据接口时,有可能某个接口提前请求结束了,这时候取消loading会导致还未结束的其他请求也失去了loading,导致页面还没有数据

三、当网络异常等引起中断时

当页面正在请求接口时突然网络异常中断了,导致请求一直无法结束loading一直显示无法操作,只能关闭应用再重新打开

四、其他情况等

针对上述有可能重新的情况,那么我们很有必要封装一下这个loading的事件,使其在任何时候都能使用:

1、给这个loading公用的事件上一个计数的锁,每次请求开始执行loading的时候这个计数值就+1,请求结束的时候loading计数值就-1,那么当这个计数值为0的时候就可以取消loading的显示了

2、设置一个默认显示时间,当网络中断等导致请求无法继续时,等待一定时间后自动取消loading

移动端-超过默认显示时间关闭loading:

import Vue from 'vue'

import { Toast } from 'vant';

Vue.use(Toast);

let loading;

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值