自制动态响应进度条三种实现方式

「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」

前言

前一阵子开发的一个小功能点，前端调接口，根据接口响应时间显示实时进度条。从开始开发到最终发版，共使用了三种方案，现在把它们记录下来，有对比才会有改进~

纯纯样式叠加

开始拿到这个设计图的时候就发现，负责视觉设计的同事已经把这几部分切好图了，那这不就简单了，所以就把它们拼成了一张图，用setTimeout进行显示顺序的控制，图片如下
主要部分代码如下：

<div class="fd-ws-jdt" v-if="showJdt">
    <div class="fd-jdt-zhezhao" v-if="isZhezhao">
        <div class="fd-jdt-bj">
            <div class="fd-jdt-sz" v-show="isJd">40%</div>
            <div class="fd-jdt-xsj" v-show="isJd"></div>
            <div class="fd-jdt-xs" v-show="isJd"></div>
        </div>
      </div>
</div>
//进度条测试
this.$nextTick(function () {
    setTimeout(() => {
        this.showJdt = true
        this.isZhezhao = true
    }, 1000)
    setTimeout(() => {
        this.isJd = true
    }, 2000)
    setTimeout(() => {
        this.showJdt = false
        this.isZhezhao = false
        Artery.message.success('制作成功！')
    }, 3000)
})

响应拦截 + nProgress

需求验证时他们说要做实时响应的，时间要符合实际接口响应时间，于是进行整改。因为我们的前端代码对axios进行了封装，里面有请求拦截器和响应拦截器。配合nProgress插件的使用，在请求拦截器里start(),在响应拦截器中done()。

NProgress 使用

import NProgress from 'nprogress'
import 'nprogress/nprogress.css' 
NProgress.start()//显示进度条
NProgress.done()//隐藏进度条

axios请求响应拦截

import Axios from 'axios'
var axios = Axios.create({
  validateStatus(status) {
    switch (status) {}
    return status >= 200 && status < 300
  }
})
//请求拦截器
axios.interceptors.request.use((config) => {
  return config
}, (error) => {
  return Promise.reject(error)
})
// 响应拦截器
axios.interceptors.response.use((response) => {
  return response
}, (error) => {
  return Promise.reject(error)
})

因为这里对axios进行了封装，所有的请求都会走这两个请求拦截，所以还需要对这个特定的接口做处理。样式也可以做调整，改得更好看一些。

setInterval 定时器

后来同事接手进行优化，可能是不太想调nProgress的样式，于是重新写了计时器，在调接口前开始计时显示进度条，接口正确返回之后结束计时隐藏进度条。

<div class="fd-process-bg" v-show="showP">
    <div class="fd-process-txt" id="progress-txt">{{ progressNum }}</div>
    <div id="process">
        <div id="progress-bar"></div>
    </div>
    <p>制作中请稍后…</p>
</div>
start() {
    this.showP = true
    var i = 0
    this.t = setInterval(function() {
        if (i < 100) {
            i++
            document.getElementById('progress-bar').style.width = i + '%'
            this.progressNum = i + ' %'
            document.getElementById('progress-txt').innerHTML = i + ' %'
        } else {
            clearInterval(t)
        }
    }, 100)
},
stop() {
    this.showP = false
    clearInterval(this.t)
},

总结

第一种方法是我写的，看起来好像有点像闹着玩，但是我个人还是最喜欢这个方案的实现效果。不过它肯定是存在问题的，生产环境下接口的响应时间和setTimeout设置的时间会有不小的差别，所以用户体验可能不行！
第二种方案，使用了NProgress插件，我自己尝试了修改样式，只能说比较难改，要达到视觉图的效果没那么简单。
第三种方案，就是最终发布的方案，感觉挺好，中规中矩吧！
以上就是真实经历的三次优化，其实应该还有更优的方案。希望各位不吝赐教~