使用axios blob响应导致浏览器崩溃,

umuewwlo  于 5个月前  发布在  iOS
关注(0)|答案(2)|浏览(90)

描述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

  • 无响应*

其他库版本

  • 无响应*

附加上下文/截图

  • 无响应*
yyhrrdl8

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客户端下载大文件的唯一方法。

o2gm4chl

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为大文件隐藏复杂性?

相关问题