分享一个后端说异步导出，前端的实现方法

最新推荐文章于 2025-07-27 14:40:20 发布

原创最新推荐文章于 2025-07-27 14:40:20 发布 · 538 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #elementui

最近做项目遇到一个导出报表的功能，后端说是异步的，前端如何处理呢？话不多说直接上方案

在页面中做一个进度条弹窗

<el-dialog : visivle.sync="showProgress" width="30%" :show-close="false" :close-on-click-modal="false">
    <p>正在导出，请稍后...</p>
    <el-progress :text-inside="true" :percentage="percentageVal" color="rgba(142,113,199,0.7)"></el-progress>
</el-dialog>

在导出按钮点击时，将showProress置为true，将percentageVal置为0，然后开始调用一个异步的后端接口，在接口内部传了个type类型表示是哪个报表，之后拿到res之后，res会给返回一个标识，或者是编号之类的，之后前端再调用一个函数来将这个编号传入，

_queryTask()函数主要功能是通过post请求查询任务进度，并根据返回的状态进行响应的处理

请求构建：

serialno作为请求参数data中的serialno字段，

使用$http的post方法请求/api/progress/XX接口，设置了超时时间为0并且传递了取消令牌this.source = this.$http.Canceltoken.source()

返回处理

如果返回的code为‘0’，表示请求成功，进一步处理结果

let result = res.data.data

如果uploadStatus为‘0’，表示上传中，更新进度值percentageVal为uploadProgress,并使用setTimeout实现递归查询任务状态

如果uploadStatus为‘1’，表示上传成功，将进度值设为100，取消查询任务（this.source.cancel()）,跳转到文件下载页面（window.location.href = `${filApi}/api/file/down/?id=${id}&timestap=XX`），并显示成功消息

如果uploadStatus为‘2’，并且有uploadMessage，表示上传失败，取消查询任务，关闭进度条，显示失败信息

如果返回的code值不为‘0’，显示错误消息