使用axios下载blob文件，文件过大时超时

解答思路

超时问题通常来自两个方向：前端自己设置了过短的 timeout 限制，或服务端主动断开了长时间未完成的连接。针对下载进度展示，axios 本身提供了 onUploadProgress 和 onDownloadProgress 两个回调，可以直接监听原生的进度事件。

示例代码

axios.get(url, {
  responseType: 'blob',
  // onUploadProgress 允许为上传处理进度事件
  onUploadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },
  // onDownloadProgress 允许为下载处理进度事件
  onDownloadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },
});

详细说明

超时问题的两种常见成因及对应处理方式：

1. 前端设置了 timeout：axios 请求配置中如果显式设置了 timeout（毫秒），一旦请求耗时超过该值就会被主动中断并抛出超时错误。对于大文件下载场景，可以直接不设置 timeout（或设置一个足够大的值），避免因下载耗时较长而被误判为超时。
2. 服务端主动断开连接：如果服务端本身设置了较短的连接保持时间，长时间未完成的请求会被服务端断开，这种情况需要调整服务端的超时/连接保持时长配置，前端无法单方面解决。

关于进度展示，axios 提供了两个进度相关的回调配置：

• onUploadProgress：用于监听上传过程的原生进度事件，适合文件上传场景。
• onDownloadProgress：用于监听下载过程的原生进度事件，适合文件下载场景（如本问题中的 blob 下载）。

两者的回调参数都是原生的 ProgressEvent，可以从中读取 loaded、total 等字段来计算并展示具体的百分比进度。

小结

大文件下载超时，优先检查前端 timeout 配置是否过短，其次考虑服务端连接保持时间；下载/上传进度展示则可以直接使用 axios 内置的 onDownloadProgress/onUploadProgress 回调。