在前端开发中，我们经常需要在页面中进行文件下载或者上传，而文件的大小一般都比较大，为了提高用户体验，我们需要对文件下载或上传的进度进行监听，以便及时反馈给用户，让用户明确知道操作的进程。
Vue.js 框架中，常用的网络请求库是 Axios，它底层使用 XMLHttpRequest 对象来实现网络请求，而 XMLHttpRequest 对象本身就支持监听上传或下载进度，因此，我们可以直接使用 Axios 对 XMLHttpRequest 的下载进度进行监听。本篇文章将详细讲解如何使用 Axios 监听 XMLHttpRequest 的下载进度，并提供相关的示例代码。
Axios 对 XMLHttpRequest 的下载进度进行监听
Axios 通过 axios.create() 方法创建实例来发送请求，我们可以在实例中通过 onDownloadProgress 方法来对 XMLHttpRequest 的下载进度进行监听。具体使用方法如下：
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- - ---------------
------------------------- -
------------- ------- -- ----- ------------ - ----
------------------- - -- -
-- - --- ------------- --
---------------- ---------- - ------- - --------
-
---在上述示例代码中，我们首先使用 axios.create() 创建了一个 Axios 实例，然后在使用 instance.get() 方法发送请求时，在请求配置中传入一个 onDownloadProgress 方法来监听下载进度。此时的 e 参数是一个 ProgressEvent 对象，其中 e.loaded 表示已下载的字节数，e.total 表示文件总字节数，所以通过 e.loaded / e.total * 100 就可以计算出下载进度的百分比。
需要注意的是，在请求配置中，我们必须将 responseType 设置为 blob，以便获取到下载的二进制数据。
示例代码
下面是一个完整的使用 Axios 监听 XMLHttpRequest 下载进度的示例代码，使用了 Vue.js 框架和 Element UI 组件库。
-- -------------------- ---- -------
----------
-----
---------- -------------- ------------------------------------
------------ ------------------------ ------------------------
------
-----------
--------
------ ----- ---- --------
------ ------- -
----- -----------
------ -
------ -
---------------- ------
----------- -
--
--
-------- -
---------- -
----- -------- - ---------------
------------------------- -
------------- ------- -- ----- ------------ - ----
------------------- - -- -
-------------------- - -----
--------------- - ----------------- - ------- - -----
-
----------- -- -
-------------------------------
-------------------- - ------
------------ -- -
-----------------------------
-------------------- - ------
---
-
-
--
---------在上述示例代码中，我们首先使用了 Element UI 组件库的 el-button 和 el-progress 组件，在按钮上绑定了 download() 方法，点击按钮即可开始下载。在 download() 方法中，我们同样使用了 instance.get() 方法发送 Axios 请求，并传入了 onDownloadProgress 方法来监听下载进度。
在 onDownloadProgress 方法中，我们将 progressVisible 设为 true，以便显示进度条；同时将 percentage 设为当前下载进度的百分比，以便更新进度条的显示。在 then 和 catch 方法中，我们分别处理下载成功和下载失败的情况，并设定 progressVisible 为 false，以便隐藏进度条。
总结
本篇文章介绍了如何在 Vue.js 中使用 Axios 监听 XMLHttpRequest 的下载进度。通过对 XMLHttpRequest 下载进度的监听，我们可以方便地实现用户友好的文件下载或上传过程，并提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647eef7c48841e9894e9e952