Axios onDownloadProgress不再正常触发？求助排查问题

问题场景 #

通过npm install axios安装Axios后，使用以下代码测试下载进度监听：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <button onclick=handleOnClick()>Click me</button>
<script src="./node_modules/axios/dist/axios.min.js"></script>
<script src="index.js"></script>
</body>
</html>

index.js代码 #

const handleOnClick = () => {
    const opts = {
        onDownloadProgress: function (eventProgress) {
            console.log(eventProgress)
        }
    }
    axios.get("https://picsum.photos/200/300", opts)
        .then(r => console.log(r))
        .catch(e => console.log(e))
}

在Chrome浏览器中运行时，onDownloadProgress仅打印一次完整的进度对象，无法实现实时下载进度监听效果，但2022年的相关教程中该功能可正常工作，想了解Axios出现了什么变化。

原因分析 #

核心变化来自Axios的请求适配器：

• 在Axios v0.x版本中，浏览器环境默认使用XMLHttpRequest发起请求，XMLHttpRequest支持分块接收数据，因此onDownloadProgress会随着数据的逐步接收多次触发，实现实时进度监听。
• 从Axios v1.0.0版本开始，浏览器环境默认切换为fetch API作为请求适配器。但fetch API本身不支持原生的分块下载进度监听（除非手动通过ReadableStream处理，Axios默认实现未适配此逻辑），导致onDownloadProgress只会在请求完全结束时触发一次。

解决方法 #

方法1：强制使用XMLHttpRequest适配器 #

在请求配置中添加adapter: 'xhr'，强制Axios使用传统的XHR方式发起请求，恢复实时进度监听：

const handleOnClick = () => {
    const opts = {
        adapter: 'xhr', // 强制启用XHR适配器
        onDownloadProgress: function (eventProgress) {
            console.log(eventProgress)
        }
    }
    axios.get("https://picsum.photos/200/300", opts)
        .then(r => console.log(r))
        .catch(e => console.log(e))
}

方法2：降级到Axios v0.x版本 #

如果不想修改代码，可以卸载当前版本，安装v0.x的稳定版本：

npm uninstall axios
npm install axios@0.27.2

内容的提问来源于stack exchange，提问作者armaka