Promise.all与Progress结合实现请求进度监听

要批量发起100,1000或者更多个请求,可以借助于Promise.all,但是如何知道请求过程中接口的调用进度情况呢?

/**
 * 模拟异步请求
 */
function timeout(time){
   
   
  return new Promise((resolve)=>{
   
   
    setTimeout(()=>{
   
   
      resolve(time);
    },time);
  }
请问在这篇文章里的<script> export default { data() { return { xhr: null, // 存储 XMLHttpRequest 对象 isDownloading: false, // 标记是否正在下载 isPaused: false, // 标记是否暂停下载 progress: 0, // 下载进度百分比 url: 'https://example.com/file.zip', // 下载文件的 URL,需要替换为实际的文件 URL resumeOffset: 0 // 恢复下载时的偏移量 }; }, methods: { downloadFile() { // 创建一个新的 XMLHttpRequest 对象 this.xhr = new XMLHttpRequest(); // 打开一个 GET 请求,设置响应类型为 blob this.xhr.open('GET', this.url, true); this.xhr.responseType = 'blob'; // 如果有恢复偏移量,设置请求头的 Range if (this.resumeOffset > 0) { this.xhr.setRequestHeader('Range', `bytes=${this.resumeOffset}-`); } // 监听下载进度事件 this.xhr.addEventListener('progress', (event) => { if (event.lengthComputable) { // 计算下载进度百分比 this.progress = Math.round((this.resumeOffset + event.loaded) / (this.resumeOffset + event.total) * 100); } }); // 监听请求完成事件 this.xhr.addEventListener('load', () => { this.isDownloading = false; this.isPaused = false; this.resumeOffset = 0; // 创建一个临时的 URL 对象 const url = window.URL.createObjectURL(this.xhr.response); // 创建一个 <a> 元素 const a = document.createElement('a'); a.href = url; a.download = 'file.zip'; // 设置下载文件名 // 模拟点击 <a> 元素进行下载 a.click(); // 释放临时 URL 对象 window.URL.revokeObjectURL(url); }); // 监听请求错误事件 this.xhr.addEventListener('error', () => { this.isDownloading = false; this.isPaused = false; console.error('下载出错'); }); // 开始发送请求 this.xhr.send(); this.isDownloading = true; this.isPaused = false; }, 这部分代码里融入和实现
03-20
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

青菜小王子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值