前端批量下载文件遍历只下载最后一个文件

在vue项目中，批量下载文件时，遍历selectRow每个对象都调用一次下载接口。最后结果只下载了一个1.jpg文件，后台检测也只调用了一次。但前端console输出了3次

后来经过很久的测试还原猜测，是浏览器默认拦截的多个同样的请求。
最后求助小领导帮我改的

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

这个问题我真的一直改不出来，匿名函数、延迟器都试过了还是不管用。
后来我问小领导为啥我的延迟器不管用，他说 你把延迟器写到循环节里面是什么意思啊？延迟一秒种调用函数么？
哈哈哈哈哈我终于知道我错哪里了，特此一篇记录下我的踩坑之旅...