描述bug
使用axios下载大小为500MB的文件时,浏览器内存使用量达到5GB,然后崩溃。此外,方法调用结束后,浏览器内存突然增加。
function axiosDownloadFile(url, fileName) {
return axios({
url,
method: 'GET',
responseType: 'blob',
}) .then(response => {
const href = window.URL.createObjectURL(response.data);
const anchorElement = document.createElement('a');
anchorElement.href = href;
anchorElement.download = fileName;
document.body.appendChild(anchorElement);
anchorElement.click();
document.body.removeChild(anchorElement);
window.URL.revokeObjectURL(href);
})
.catch(error => {
console.log('error: ', error);
});
}
重现步骤
- 无响应*
代码片段
- 无响应*
预期行为
- 无响应*
axios版本
1.3.5
适配器版本
- 无响应*
浏览器
Chrome
浏览器版本
- 无响应*
Node.js版本
- 无响应*
OS
- 无响应*
其他库版本
- 无响应*
附加上下文/截图
- 无响应*
2条答案
按热度按时间yyhrrdl81#
这是Blob的工作方式,所以这不是Axios的问题。
https://stackoverflow.com/questions/16846382/memory-usage-with-xhr-blob-responsetype-chrome?rq=3
https://stackoverflow.com/questions/61567890/how-to-fix-browser-blob-download-from-maxing-ram
为什么不能直接从链接下载?如果浏览器可以在后台从链接下载文件,那么使用客户端库下载文件就没有意义了。
在大多数浏览器可以使用文件系统API并且Axios获得流支持之前,这是使用fetch/xhr客户端下载大文件的唯一方法。
o2gm4chl2#
这是Blob的工作方式,所以这不是Axios的问题。https://stackoverflow.com/questions/16846382/memory-usage-with-xhr-blob-responsetype-chrome?rq=3https://stackoverflow.com/questions/61567890/how-to-fix-browser-blob-download-from-maxing-ram 为什么不能直接从链接下载?如果浏览器可以在后台从链接下载文件,那么使用客户端库下载文件就没有意义了。除非大多数浏览器都支持文件系统API并且Axios获得流式传输支持,否则使用fetch/xhr客户端下载大文件是唯一的方法。
我们使用Axios和文件系统API开发文件夹下载功能,它在小文件上按预期工作,但对于大文件不起作用。是否可以支持流式传输或其他想法,例如让axios为大文件隐藏复杂性?