在vue项目中，批量下载文件时，遍历selectRow每个对象都调用一次下载接口。最后结果只下载了一个1.jpg文件，后台检测也只调用了一次。但前端console输出了3次
image.png
后来经过很久的测试还原猜测，是浏览器默认拦截的多个同样的请求。
最后求助小领导帮我改的
<script>
export default {
methods: {
// 批量下载 - 遍历循环
batchDownload() {
for (const file of this.selectedRows) {
this.downloadBatch(file.path, (obj) => {
this.saveFile(obj, file.fileName)
})
}
},
// 批量下载 - 发送请求
downloadBatch(file, callback) {
var request = new XMLHttpRequest()
request.responseType = 'blob'
request.open('GET', file)
request.addEventListener('load', function () {
callback(request.response)
})
request.send()
},
// 批量下载 - 保存图片
saveFile(object, name) {
var a = document.createElement('a')
var url = URL.createObjectURL(object)
a.href = url
a.download = name
a.click()
}
}
}
</script>
这个问题我真的一直改不出来，匿名函数、延迟器都试过了还是不管用。
后来我问小领导为啥我的延迟器不管用，他说 你把延迟器写到循环节里面是什么意思啊？延迟一秒种调用函数么？
哈哈哈哈哈我终于知道我错哪里了，特此一篇记录下我的踩坑之旅...
