VUE轮询更新进度条：JavaScript中的定时器和异步编程技巧

原创

已于 2023-12-19 14:07:38 修改 · 1.1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #elementui #javascript #http #websocket

于 2023-09-22 17:07:17 首次发布

本文详细阐述了如何使用JavaScript的异步编程和定时器技术实现实时进度更新，包括async/await、Promise和轮询方法，并讨论了HTTP协议在实时性方面的局限性，推荐了WebSocket和Server-SentEvents作为替代方案。

前言

在Web开发中，有许多场景需要实时地更新页面上的进度，例如上传文件、数据处理等。本文将介绍如何利用JavaScript中的定时器和异步编程技巧来实现实时更新进度，并探讨一些其他解决方案。

处理进度实时更新：

利用异步编程实现实时进度更新

利用async/await结合Promise可以让代码看起来更加清晰，同时实现实时更新的效果。

<el-table>
  <el-table-column label="进度" width="120" align="center">
    <template slot-scope="scope">
      <el-progress :percentage="Math.round(scope.row.progress * 100)" color="#00E2AE"></el-progress>
    </template>
  </el-table-column>
  <el-table-column label="操作" align="center">
    <template slot-scope="scope">
      <img src="..." alt="" @click="reloadTask(scope.row)" />
    </template>
  </el-table-c