快捷導(dǎo)航

Vue?實(shí)現(xiàn)接口進(jìn)度條示例詳解

更新時(shí)間：2023年04月25日 15:36:09 作者：??????????????????

這篇文章主要介紹了Vue實(shí)現(xiàn)接口進(jìn)度條功能，在請(qǐng)求數(shù)據(jù)的過(guò)程中，需要添加監(jiān)聽函數(shù)來(lái)監(jiān)測(cè)數(shù)據(jù)請(qǐng)求的過(guò)程變化，并更新組件相應(yīng)的屬性和界面元素,本文結(jié)合實(shí)例代碼詳細(xì)講解，需要的朋友可以參考下

實(shí)現(xiàn)思路

首先定義一個(gè)進(jìn)度條組件來(lái)渲染頁(yè)面展示效果，組件包含進(jìn)度條背景、進(jìn)度長(zhǎng)度、以及進(jìn)度數(shù)字，同時(shí)還要設(shè)置數(shù)據(jù)綁定相關(guān)屬性，如進(jìn)度條當(dāng)前的百分比、動(dòng)畫執(zhí)行狀態(tài)、以及完成狀態(tài)等。在請(qǐng)求數(shù)據(jù)的過(guò)程中，需要添加監(jiān)聽函數(shù)來(lái)監(jiān)測(cè)數(shù)據(jù)請(qǐng)求的過(guò)程變化，并更新組件相應(yīng)的屬性和界面元素。

代碼實(shí)現(xiàn)

下面是使用 Vue 實(shí)現(xiàn)一個(gè)接口進(jìn)度條的栗子：

<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>

首先定義了三個(gè)數(shù)據(jù)屬性用于控制動(dòng)畫的播放和完成狀態(tài)，分別是進(jìn)度條當(dāng)前比例 progress、動(dòng)畫播放狀態(tài) isPlaying、動(dòng)畫完成狀態(tài) isCompleted。在組件初始化的過(guò)程中，調(diào)用了 start 方法來(lái)啟動(dòng)進(jìn)度條動(dòng)畫效果。在該方法內(nèi)部，使用 Promise 來(lái)從 0% 到 90% 的百分比向相應(yīng)位置移動(dòng)，并在到達(dá)該位置時(shí)停止。

判斷當(dāng)前是否完成，如果沒(méi)有完成則再次調(diào)用 animateProgress(100) ，并在進(jìn)度加載期間檢查是否有數(shù)據(jù)返回。若存在，則停止前半段動(dòng)畫，并使用1秒鐘將進(jìn)度條填充至100%。

下面講解一下如何在請(qǐng)求數(shù)據(jù)的過(guò)程中添加監(jiān)聽函數(shù)：

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

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

在這個(gè)代碼片段中，使用了 Axios 攔截器來(lái)監(jiān)聽請(qǐng)求的過(guò)程。在請(qǐng)求開始之前，向頁(yè)面添加進(jìn)度條組件，之后將該組件掛載到頁(yè)面中，并且將其元素追加到 HTML 的 <body> 標(biāo)記尾部。

接下來(lái)，通過(guò) onDownloadProgress 監(jiān)聽函數(shù)來(lái)監(jiān)測(cè)下載進(jìn)度的變化。如果加載完成則移除進(jìn)度條組件。同時(shí)，也可以實(shí)現(xiàn)針對(duì)使用不同 API 的 ajax 請(qǐng)求設(shè)定不同的進(jìn)度條，以達(dá)到更佳的用戶體驗(yàn)效果。

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);
});

參數(shù)注入

為了能夠靈活地調(diào)整接口進(jìn)度條效果，可以使用參數(shù)注入來(lái)控制動(dòng)畫速度和完成時(shí)間的設(shè)定。在 animateProgress 函數(shù)中，使用傳參來(lái)設(shè)置百分比范圍和動(dòng)畫播放速度，從而得到不同進(jìn)度條和播放時(shí)間的效果。

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);
        }
    })
...

在這個(gè)栗子中，將 duration 參數(shù)添加到 animateProgress 函數(shù)內(nèi)部，并使用該參數(shù)來(lái)設(shè)置動(dòng)畫速度和完成時(shí)間。在第一個(gè)調(diào)用函數(shù)的時(shí)候，將異步進(jìn)度條的播放時(shí)間設(shè)為 1000ms，從而得到速度較慢、完成時(shí)間較長(zhǎng)的進(jìn)度條效果。在第二個(gè)調(diào)用函數(shù)時(shí)，將進(jìn)度條完成時(shí)間縮短為 500ms，并獲得由此帶來(lái)的更快動(dòng)畫效果。

總結(jié)

實(shí)現(xiàn)一個(gè)接口進(jìn)度條函數(shù)可以提高網(wǎng)站性能和用戶體驗(yàn)效果，同時(shí)也可以讓頁(yè)面更加交互性和生動(dòng)有趣。在栗子中，使用了 Vue 框架來(lái)構(gòu)建動(dòng)畫組件，使用了 Axios 攔截器來(lái)監(jiān)聽請(qǐng)求進(jìn)度，使用了參數(shù)注入來(lái)控制動(dòng)畫速度和完成時(shí)間。

到此這篇關(guān)于Vue 實(shí)現(xiàn)接口進(jìn)度條的文章就介紹到這了,更多相關(guān)Vue 接口進(jìn)度條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: