Web应用程序进度条,从无到有搭建
解决思路:
后台:
- 每一个Api_A在执行过程中都会被分成几个大阶段,比如初始化阶段,执行阶段,执行成功等,我们需要自己定义每个阶段的进度。
- 在后台定义一个全局缓存(建议这个全局缓存用分布式缓存的策略,例如用redis,因为如果项目用上了集群,进程级别的缓存是不能共享的),以key(前台传过来的Guid),value的形式存储当前api所运行的状态。当这个api在各个阶段运行时,都给这个全局缓存赋值,报告当前百分比进度,在哪个阶段,当Api_A执行结束时在全局缓存中删除该key即可。
- 新创建个用于访问当前api进度和状态的Api_B,传入一个api key,返回一个百分比进度和当前阶段。
前台:
- 提前定义好进度条的样式(如果跟我一样是前台白痴,访问该站点获取样式),封装一个js_A方法,传入进度百分比参数,控制进度条样式长度。
- 前台执行Api_A时传入一个新生成的guid,(在加入全局缓存的时候会用上),在异步等待结果的同时,调用js内置的setInterval方法,定时(一般5s访问一次)去访问Api_B,将之前生成的guid传入到这个api中,用每一次拿到的api结果,调用js_A方法去改变进度条的样式,就OK了。
项目源码:
项目代码不便直接上传,我会单独抽离出,进度条相关代码作为示例代码,供大家参考。