ios浏览器下载和请求冲突问题_safari下载和调用接口同时进行-CSDN博客

本文链接：https://blog.csdn.net/l13620804253/article/details/129590278

文章描述了一个在页面中点击按钮下载视频的功能实现，遇到的问题是iOS设备上下载请求回调会一直pending，导致无法正确记录下载状态。作者尝试了优化，将添加视频计划的操作提前并在finally块中执行，以确保下载完成后能正确记录视频下载状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：就是页面点击按钮下载视频，然后后端记录下这个视频是否被下载过了；

初始实现：

handleDown(src) {
    let url = process.env.VUE_APP_KZ_API_URL + '/tool/tool/Helper/videoDownload?response-content-type=application/octet-stream&video_path=' + src
    let fileName = src.split('').reverse().join('').slice(0, src.split('').reverse().join('').indexOf('/')).split('').reverse().join('')
    console.log('下载视频:', fileName)
    const link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.download = fileName
    document.body.appendChild(link)
    link.click()
    link.onload = () => {
      document.body.removeChild(link)
    }
    console.log('当前视频点击下载id', this.props?.data?.id)
    // 下载完回调 
    addVideoPlan({id: this.props?.data?.id || 0})
    
  }

这个下载安卓环境正常，但ios会出现只下载请求回调一直pending，导致回调下载状态无法完成；

优化后：

addVideoPlan({id: this.props?.data?.id || 0}).finally(res => {
  let url = process.env.VUE_APP_URL + 'url/videoDownload?response-content-type=application/octet-stream&video_path=' + src
  let fileName = src.split('').reverse().join('').slice(0, src.split('').reverse().join('').indexOf('/')).split('').reverse().join('')
  const link = document.createElement('a')
  link.style.display = 'none'
  link.href = url
  link.download = fileName
  document.body.appendChild(link)
  link.click()
  link.onload = () => {
    document.body.removeChild(link)
  }
})