[前端开发Vue]在Axios中，怎么实现实时监听上传数据进度、监听接口返回数据进度、如何终止网络请求。实现上传文件实时进度条以及下载文件实时进度条。

2024-07-04 02:28| 来源: 网络整理| 查看: 265

1. Axios的本质 Axios的本质是XHR的promise封装，所以XHR的一些函数对它也同样适用。 2. 如何监听上传数据的实时进度 // 涉及函数onUploadProgress // 形参: event // 函数作用：请求接口上传的过程中会不停的调用onUploadProgress函数 axiox({ url: 'api/XXX', method: 'post', onUploadProgress: function (e) { console.log('e:',e); } })

观察一下console.log输出的内容如下：在这里插入图片描述可以从上面看出来，在上传的过程中，会不停的多次的调用onUploadProgress函数，其中里面的total为本次上传的总数据大小，loaded为本次上传已上传了多少数据。

so！我们就要用到我们无比高贵的小学数学，已知…求…还好小学毕业多年的我数学功底还在，所以！showTime我的算法！ const onUploadProgress = (e) => { const progress = Math.floor( (e.loaded / e.total) * 100, ); };

在这里插入图片描述果然不出我所料，我成功用高端的算法计算出了进度！

3. 如何实时监听下载数据的进度

Wait a minute! 你们是不是又觉得我在水字数了？没错！看人真准！

// 函数 onDownLoadProgress axiox({ url: 'api/XXX', method: 'post', onDowbloadProgress: function (e) { console.log('e:',e); } })

结果如下在这里插入图片描述其中loaded还是已经下载了的数据大小，至于总数据大小，需要后端提供，可以写在响应头中！伟大的算法就不展示第二次了，已下载数据/总数据大小，即可获得进度！

4. 如何终止网络请求。

首先，我们要知道axios中，config参数中有一个用于终止请求的方法在这里插入图片描述上图字面意思就是创建一个实例，里面包括该请求的终止方法和该请求的token。当我们需要终止网络请求时，调用该实例的cancel()方法即可。

// 创建一个token令牌 tips:axios.CancelToken.source()方法是axios内置创建取消请求的方法 const cancelToken = axios.CancelToken.source() // 此时，新建一个axios请求，并把该令牌赋值给confi axios.get('XXX/XXX', { cancelToken }); // 当我们需要终止该请求时 cancelToken.cancel();

【本文地址】

公司简介

联系我们