浏览器选择下载文件时如何优雅地取消请求?AbortController 在文件下载中的实践
用户在后台管理系统里点了导出报表,文件比较大,要等十几秒。这期间他们又点了取消,或者切换了筛选条件重新导出。结果旧请求还在跑,新请求又发出去,浏览器可能在下载完成后弹出两个保存对话框。这个问题在文件生成接口、批量数据导出、日志下载等场景里很常见。原因在于前端用 fetch 或 XMLHttpRequest 发起下载时,没有把请求和用户操作的生命周期绑定起来,HTTP 请求一旦发出就只能等它自然结束。AbortController 提供了中断 fetch 请求的能力,再配合 URL.createObjectURL 和动态 a 标签,可以在用户取消时真正终止网络传输,避免服务端白跑、浏览器内存堆积...