vue 假性进度条(自编的)

272 阅读1分钟

起因

起因是自己在用腾讯云储存的时候,发现通过axios来封装进度条,在上传文件到腾讯云储存时候它并不会显示进度条,它底层发网络请求的时候没有调用自己封装的axios。

image.png 它通过云储存提供的内部方法,往服务器发请求。

进度条

后面自己梳理了一下自己做项目的时候发网络请求的流程:调用axios的请求方法->通过then和catch来获取响应结果。在发请求之前显示进度条,之后在then和catch里隐藏进度条,它这种是经过axios,可以很的规范显示进度条内容。

假性进度条

但是如果不经过axios,该如何怎么显示进度条。于是自己基于element plus的progress组件封装了一个进度条,取名为'假性进度条'😂,上传小容量文件的时候就用它。 效果:

123.gif 在发网络请求的时候显示进度条,拿到响应结果的时候关闭进度条。

image.png 实现思路: 首先得确定服务器响应时间的最大值,例如服务器的响应时间最大为8s,那我就在给进度条的最大的总累加时间设置为10s,前8s进度条做匀速累加,等到响应结果返回的时候,再快速做累加,让进度累加到100。

image.png 代码还是很简单的,通过setInterval定时器来做数据累加

image.png