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

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

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

實現(xiàn)思路

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

代碼實現(xiàn)

下面是使用 Vue 實現(xià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>

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

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

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

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

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

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

接下來，通過 onDownloadProgress 監(jiān)聽函數(shù)來監(jiān)測下載進度的變化。如果加載完成則移除進度條組件。同時，也可以實現(xiàn)針對使用不同 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);
});

參數(shù)注入

為了能夠靈活地調整接口進度條效果，可以使用參數(shù)注入來控制動畫速度和完成時間的設定。在 animateProgress 函數(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);
        }
    })
...

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