Vue项目中实现路由守卫自动取消Pending请求

现代Web应用中，当用户在页面间快速切换时，常常会遇到一些正在进行的网络请求继续执行的问题。这不仅会浪费服务器资源，还可能导致页面状态不一致。本文将介绍如何在Vue项目中通过路由守卫实现自动取消pending请求的功能，提高应用的性能和用户体验。

问题背景

在单页应用（SPA）中，用户可能会在短时间内快速切换多个页面。如果前一个页面的网络请求尚未完成，而用户已经跳转到新页面，这些未完成的请求可能会：

继续执行并返回数据，导致新页面的状态被错误覆盖
占用服务器资源处理不必要的请求
可能引发竞态条件，导致数据不一致

解决方案：使用AbortController API

现代浏览器提供了AbortController API，可以用来取消fetch请求和axios请求。Vue项目中可以通过以下方式实现自动取消pending请求：

实现原理

存储pending请求：使用Map数据结构存储所有正在进行的请求及其控制器
路由守卫拦截：在路由切换时检查并取消所有pending请求
请求生命周期管理：在请求开始时添加到pending列表，在请求完成后移除

实现解析

1. 创建请求控制器存储

在src/utils/http.js中，我们使用Map来存储所有pending请求的控制器：

javascript 复制代码

// 存储所有pending请求的控制器
export const pendingRequests = new Map()

2. 请求拦截器中添加控制器

在axios的请求拦截器中，为每个请求创建AbortController并存储：

javascript 复制代码

http.interceptors.request.use(config => {
  const controller = new AbortController()
  const requestKey = Symbol() // 使用Symbol确保唯一性
  config.requestKey = requestKey
  config.signal = controller.signal
  pendingRequests.set(requestKey, controller)
  return config
})

3. 响应拦截器中移除控制器

在响应拦截器中，请求完成后从pending列表中移除对应的控制器：

javascript 复制代码

http.interceptors.response.use(
  response => {
    const requestKey = response.config.requestKey
    pendingRequests.delete(requestKey)
    return response
  }
)

4. 路由守卫中取消pending请求

在src/main.js中，通过路由守卫在页面切换时取消所有pending请求：

javascript 复制代码

import { pendingRequests } from './utils/http'

router.beforeEach((to, from, next) => {
  if (pendingRequests.size > 0) {
    // 遍历并取消所有pending的请求
    pendingRequests.forEach(controller => controller.abort())
    // 清空Map
    pendingRequests.clear()
  }
  next()
})

完整流程图

graph TD A[发起请求] --> B[创建AbortController] B --> C[存储控制器到pendingRequests] C --> D[发送请求] D --> E[请求完成] E --> F[从pendingRequests移除控制器] G[路由切换] --> H[检查pendingRequests] H --> I{pendingRequests有请求?} I -->|是| J[遍历并取消所有请求] J --> K[清空pendingRequests] I -->|否| L[继续路由跳转] K --> L

优势

资源优化：避免不必要的网络请求，减少服务器负载
用户体验：防止旧页面数据影响新页面状态
状态管理：确保页面状态的一致性
错误处理：通过axios的isCancel方法可以优雅地处理取消的请求

注意事项

白名单处理：可以根据需要为某些重要请求添加白名单，不进行取消
错误处理：正确处理被取消的请求，避免影响用户体验
性能考虑：Map操作的时间复杂度为O(1)，适合频繁的增删操作

总结

通过在路由守卫中自动取消pending请求，我们可以显著提升单页应用的性能和用户体验。这个实现利用了现代浏览器的AbortController API，结合Vue的路由系统和axios的拦截器机制，提供了一个优雅的解决方案。

在实际项目中，这种模式可以有效地管理网络请求的生命周期，确保应用的稳定性和响应性。希望这篇文章能帮助你更好地理解和实现这一重要功能！