注册
web

Vue 实现接口进度条

cover.png


前端在向后端请求信息时,常常需要等待一定的时间才能得到返回结果。为了提高用户体验,可以通过实现一个接口进度条函数来增加页面的交互性和视觉效果。



接口响应快 - 效果



接口响应慢 - 效果


实现思路


首先定义一个进度条组件来渲染页面展示效果,组件包含进度条背景、进度长度、以及进度数字,同时还要设置数据绑定相关属性,如进度条当前的百分比、动画执行状态、以及完成状态等。在请求数据的过程中,需要添加监听函数来监测数据请求的过程变化,并更新组件相应的属性和界面元素。


代码实现


下面是使用 Vue 实现一个接口进度条的栗子:


<template>
<div class="progress-bar">
<div class="bg"></div>
<div class="bar" :style="{ width: progress + '%' }"></div>
<div class="label">{{ progress }}%</div>
</div>
</template>

<script>
export default {
data() {
return {
progress: 0,
isPlaying: false,
isCompleted: false
}
},
mounted() {
this.start();
},
methods: {
start() {
this.isPlaying = true;
this.animateProgress(90)
.then(() => {
if (!this.isCompleted) {
this.animateProgress(100);
}
})
.catch((error) => {
console.error('Progress error', error);
});
},
animateProgress(target) {
return new Promise((resolve, reject) => {
let start = this.progress;
const end = target;
const duration = (target - start) * 150;

const doAnimation = () => {
const elapsed = Date.now() - startTime;
const progress = Math.min(elapsed / duration, 1);

this.progress = start + ((end - start) * progress);

if (progress === 1) {
resolve();
} else if (this.isCompleted) {
resolve();
} else {
requestAnimationFrame(doAnimation);
}
};

const startTime = Date.now();
requestAnimationFrame(doAnimation);
});
},
finish() {
this.isCompleted = true;
this.progress = 100;
}
}
};
</script>

<style scoped>
.progress-bar {
position: relative;
height: 8px;
margin: 10px 0;
}
.bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ccc;
border-radius: 5px;
}
.bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-radius: 5px;
background-color: #409eff;
transition: width 0.5s;
}
.label {
position: absolute;
top: -20px;
left: calc(100% + 5px);
color: #333;
font-size: 12px;
}
</style>

首先定义了三个数据属性用于控制动画的播放和完成状态,分别是进度条当前比例 progress、动画播放状态 isPlaying、动画完成状态 isCompleted。在组件初始化的过程中,调用了 start 方法来启动进度条动画效果。在该方法内部,使用 Promise 来从 0% 到 90% 的百分比向相应位置移动,并在到达该位置时停止。


判断当前是否完成,如果没有完成则再次调用 animateProgress(100) ,并在进度加载期间检查是否有数据返回。若存在,则停止前半段动画,并使用1秒钟将进度条填充至100%。


下面讲解一下如何在请求数据的过程中添加监听函数:


import axios from 'axios';
import ProgressBar from './ProgressBar.vue';

const progressBar = new Vue(ProgressBar).$mount();
document.body.appendChild(progressBar.$el);

在这个代码片段中,使用了 Axios 拦截器来监听请求的过程。在请求开始之前,向页面添加进度条组件,之后将该组件挂载到页面中,并且将其元素追加到 HTML 的 <body> 标记尾部。


接下来,通过 onDownloadProgress 监听函数来监测下载进度的变化。如果加载完成则移除进度条组件。同时,也可以实现针对使用不同 API 的 ajax 请求设定不同的进度条,以达到更佳的用户体验效果。


axios.interceptors.request.use((config) => {    
const progressBar = new Vue(ProgressBar).$mount();
document.body.appendChild(progressBar.$el);

config.onDownloadProgress = (event) => {
if (event.lengthComputable) {
progressBar.progress = parseInt((event.loaded / event.total) * 100, 10);
if (progressBar.progress === 100) {
progressBar.finish();
setTimeout(() => {
document.body.removeChild(progressBar.$el);
}, 500);
}
}
};

return config;
}, (error) => {
return Promise.reject(error);
});

参数注入


为了能够灵活地调整接口进度条效果,可以使用参数注入来控制动画速度和完成时间的设定。在 animateProgress 函数中,使用传参来设置百分比范围和动画播放速度,从而得到不同进度条和播放时间的效果。


animateProgress(target, duration) {
return new Promise((resolve, reject) => {
let start = this.progress;
const end = target;

const doAnimation = () => {
const elapsed = Date.now() - startTime;
const progress = Math.min(elapsed / duration, 1);

this.progress = start + ((end - start) * progress);

if (progress === 1) {
resolve();
} else if (this.isCompleted) {
resolve();
} else {
requestAnimationFrame(doAnimation);
}
};

const startTime = Date.now();
requestAnimationFrame(doAnimation);
});
}

...

this.animateProgress(90, 1000)
.then(() => {
if (!this.isCompleted) {
this.animateProgress(100, 500);
}
})
...

在这个栗子中,将 duration 参数添加到 animateProgress 函数内部,并使用该参数来设置动画速度和完成时间。在第一个调用函数的时候,将异步进度条的播放时间设为 1000ms,从而得到速度较慢、完成时间较长的进度条效果。在第二个调用函数时,将进度条完成时间缩短为 500ms,并获得由此带来的更快动画效果。


总结


实现一个接口进度条函数可以提高网站性能和用户体验效果,同时也可以让页面更加交互性和生动有趣。在栗子中,使用了 Vue 框架来构建动画组件,使用了 Axios 拦截器来监听请求进度,使用了参数注入来控制动画速度和完成时间。


作者:𝑺𝒉𝒊𝒉𝑯𝒔𝒊𝒏𝒈
来源:juejin.cn/post/7225417805855916087

0 个评论

要回复文章请先登录注册