在Vue项目中使用Axios发请求后不等响应直接跳转如何避免请求被取消？

请求被取消通常来自两个层面的逻辑：

• 浏览器默认行为：页面跳转/卸载时，会主动终止当前页面所有未完成的XMLHttpRequest（Axios底层默认使用XHR实现）请求
• 项目全局拦截逻辑：多数Vue项目会在路由前置守卫中通过Axios的CancelToken统一取消前序页面未完成的请求，避免无效资源占用，埋点请求也会被误杀

按可靠性和兼容性优先级排序如下：

方案1：使用navigator.sendBeacon()（优先推荐） #

该API是W3C专门为统计埋点类场景设计，天生适配你的需求：

• 异步发送请求，不会阻塞页面跳转逻辑执行
• 浏览器会保证请求在页面卸载前完成发送，即使跳转也不会中断
• 优先级低，不占用主线程资源，对用户体验无影响
  示例代码：

// 按钮点击事件处理
handleClick() {
  // 构造埋点参数，支持FormData、Blob、URLSearchParams类型
  const logData = new FormData()
  logData.append('clickType', 'target_btn')
  logData.append('timestamp', Date.now())
  logData.append('userId', this.userId)

  // 发送埋点请求，无需等待返回
  navigator.sendBeacon('/api/click-record', logData)

  // 直接执行跳转即可
  this.$router.push('/target-page')
}

注意：navigator.sendBeacon()仅支持POST请求，无法自定义请求头，如果后端需要鉴权token，可将token放入请求参数或URL查询参数中与后端适配。

方案2：排除埋点请求的全局取消规则+短延迟跳转 #

如果请求被取消是因为项目的全局Axios取消逻辑，可给埋点请求加特殊标记跳过取消，配合短延迟保证请求成功发出：

1. 在Axios请求拦截器中新增跳过规则：

axios.interceptors.request.use(config => {
  // 给埋点类请求加跳过取消的标记
  if (config.url.includes('/click-record')) {
    config.skipCancel = true
  }
  // 仅给非跳过类请求绑定cancelToken
  if (!config.skipCancel) {
    const source = axios.CancelToken.source()
    config.cancelToken = source.token
    // 将取消方法存入全局数组，供路由守卫调用
    window.pendingCancelFns.push(source.cancel)
  }
  return config
})

2. 调整路由守卫的全局取消逻辑：

router.beforeEach((to, from, next) => {
  // 执行所有未跳过请求的取消方法
  window.pendingCancelFns.forEach(cancel => cancel())
  window.pendingCancelFns = []
  next()
})

3. 按钮点击逻辑中加短延迟跳转：

handleClick() {
  axios.post('/api/click-record', {
    clickType: 'target_btn',
    timestamp: Date.now(),
    userId: this.userId
  })
  // 100-200ms延迟保证请求已发出到后端，网络差的场景可适当调整
  setTimeout(() => {
    this.$router.push('/target-page')
  }, 150)
}

方案3：监听请求上传完成事件后跳转 #

如果允许极短的等待，可通过onUploadProgress事件判断请求已经发送到后端，无需等待响应即可跳转：

handleClick() {
  axios.post('/api/click-record', {
    clickType: 'target_btn',
    timestamp: Date.now(),
    userId: this.userId
  }, {
    onUploadProgress: () => {
      // 请求体已上传至服务端，直接跳转
      this.$router.push('/target-page')
    }
  })
}

内容的提问来源于stack exchange，提问作者Atom999