Vue 路由切换取消所有请求操作实现

"在Vue应用中，为了优化用户体验，我们经常需要在路由切换时取消之前的网络请求，确保新页面的数据加载不受旧页面请求的影响。这个需求可以通过在`main.js`文件中配置路由守卫和使用axios的`CancelToken`特性来实现。下面将详细介绍这个过程及其相关知识点。 首先，引入必要的库，如Vue、axios和vue-axios。Vue用于构建用户界面，axios用于发起HTTP请求，vue-axios是将axios与Vue结合的插件。在`main.js`文件中，你会看到类似这样的代码： ```javascript import Vue from 'vue'; import router from 'router/'; import axios from 'axios'; import VueAxios from 'vue-axios'; Vue.use(VueAxios, axios); ``` 接下来，我们需要在路由守卫`beforeEach`中处理请求的取消。Vue Router提供了一个全局前置守卫`beforeEach`，它会在每次路由切换时执行。在这个守卫中，我们可以维护一个数组`Vue.Cancel`来存储所有的取消函数。当路由切换时，遍历这个数组并调用每个取消函数，这样就可以终止之前的请求。代码如下： ```javascript Vue.Cancel = []; router.beforeEach((to, from, next) => { while (Vue.Cancel.length > 0) { Vue.Cancel.shift()('cancel'); } next(); }); ``` 然后，我们来看看axios的`CancelToken`。axios允许我们在发起请求时提供一个`cancelToken`，这个令牌可以用来取消相关的请求。在请求的配置选项中，我们可以创建一个新的`CancelToken`实例，并传递一个回调函数，这个函数接受一个`cancel`方法，当调用这个方法时，对应的请求就会被取消。在axios的配置中添加`cancelToken`，并将取消函数添加到`Vue.Cancel`数组中，代码如下： ```javascript export default function ({ type, path, data, params, urlParams, fn, errFn, tokenFlag, headers, opts }) { var options = { method: type, url: path, params: params, headers: headers && typeof headers === 'object' ? headers : {}, cancelToken: new axios.CancelToken(function (cancel) { Vue.Cancel && Vue.Cancel.push(cancel); }) }; } ``` 在上述代码中，我们封装了一个通用的axios请求函数，它接受一系列参数，包括请求类型（GET或POST）、URL、数据、参数等，并提供了取消请求的机制。通过`Vue.Cancel.push(cancel)`，我们将取消函数保存在`Vue.Cancel`数组中，这样在路由切换时，我们就可以通过遍历并调用这个数组来取消所有未完成的请求。 此外，为了提高安全性，我们还可以在请求中加入权限检查(`api_flag`)，或者根据业务需求决定是否携带token。例如，对于需要验证身份的操作，通常需要在请求头中包含token。这些功能可以通过自定义函数实现，并在请求配置中调用。 总结来说，Vue应用中实现路由切换时取消所有请求的关键在于利用Vue Router的`beforeEach`守卫和axios的`CancelToken`。通过这种方式，我们可以确保用户在导航到新页面时，旧页面的请求不会干扰新页面的数据加载，从而提升应用的性能和用户体验。"