关于Vue路由切换时中断上一个路由请求情况的处理

最新推荐文章于 2024-08-15 09:30:15 发布

尼古拉斯·广坤

最新推荐文章于 2024-08-15 09:30:15 发布

阅读量1.8k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/qq_40907752/article/details/108670018

版权

开篇闲话

前两天做项目的时候遇到一个问题，那就是路由切换了但是上一个路由的请求依旧继续执行，导致页面卡顿，以及新的请求和之前请求一块发送非常影响性能。就想到了axios中可以使用cancelToken可以用来中断请求，于是记录下来以备不时之需（小白学习，还有很多不足，希望大佬可以指正！）

1、首先，由于我们要在store中对请求进行状态管理所以要在store中管理取消的请求操作 Store/index.js

在这里插入图片描述

2、然后在对axios进行二次封装，设置请求（request）和响应（response）的处理操作

（不要忘了导入store和导出axios，新手常犯得错误）axios.js
在这里插入图片描述

最后一步，就是监听路由切换，在路由表中设置路由守卫对路由进行监听，在路由切换时对上一个路由的请求进行中断

在这里插入图片描述

进行路由切换测试，如果看到如下结果，则证明路由请求中断成功

在这里插入图片描述
我也是借鉴大佬的写法，中间摸索了好久，至于原理还是很懵，只是处于实现业务逻辑的阶段。希望可以帮助到遇到类似问题的小伙伴
加油呀！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

尼古拉斯·广坤

关注关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue中断发送中请求

woyaojinali的博客

02-25

2457

vue=>axios中断发送中请求1.方法2.用VUE的小伙伴可以这样设置 1.方法 var CancelToken = axios.CancelToken; var cancel; axios.get('/user/12345', { cancelToken: new CancelToken(function executor(c) { // executor 函数接收一个 cancel 函数作为参数 cancel = c; }) }); // 取消请求 cancel()

vue小技巧:性能优化使用篇 =＞路由/tab切换取消当前页面异步请求

weixin_44395929的博客

04-15

2302

//tab在前端是非常常见的一个组件, 在vue里面, 结合了双向绑定原理, 更是将页面无感刷新提升到了极致 //假设每个tab选项都需要请求一次接口(做一次异步操作) //但是假如我们有一个手速超快的人(我摊牌了, 就是我), 他在一秒钟内能切换3次tab选项, 也就是请求了三次接口, 然后他又生活在山旮旯里面, 网络请求要3 秒后才能返回结果, 他脾气不好, 来回点了9次, 才会有第一个请求的数据返回试问如何保证返回的数据是最后一次切换后的数据一、防抖 //不多做介绍, 防抖从原理和可行性上分析,

2 条评论您还未登录，请先登录后发表或查看评论

vue 路由切换时中止未完成的请求

aInkFish的博客

09-21

1548

简单的配置就好了第一步：axios里面配置全局 promiseArr window._axiosPromiseArr = [] // http request 拦截器 axios.interceptors.request.use( config => { config.headers = { 'Content-Type': 'application/json;charset=UTF-8' }; // 每个请求都会

vue2 vue3 同一个接口出现数据混乱问题中断上一个接口

最新发布

Ll307748784的博客

08-15

161

我们使用axios 中的方法来确定里面的值是不是同一个接口进行中断处理。先引入方法 (方法已经封装来axios的)

vue切换页面，前一个页面的异步方法还在继续执行

qq_41539807的博客

04-02

1738

vue切换页面，前一个页面的异步方法还在继续执行

vue 中断请求

︶￣城南花已开

07-24

573

vue 中断请求

【VUE】跳转页面，取消上个页面未完成请求

Y_hhya的博客

10-25

592

监控大屏翻页时并未取消上一页未返回数据的请求，在网速慢的时候下一页迟迟加载不出来。跳转页面时取消上个页面未完成的请求。3.需要执行取消请求的位置。如有问题还请大佬们指正~~

vue axios 在页面切换时中断请求方法 ajax

08-27

接下来，我们需要在路由切换的监听器`router.beforeEach`中调用取消请求的方法。在这个方法中，我们可以检查是否有正在进行的请求并调用`cancel`函数： ```javascript Vue.prototype.cancelAjax = function() { if...

vue路由跳转时取消之前的请求 cancelToken以及解决路由重复点击报错问题

EnidChann的博客

07-09

1384

// 1.请求拦截器 window._axiosPromiseArr = [] // axios中设置放置要取消的对象 axios.interceptors.request.use(config => { config.cancelToken = new axios.CancelToken(cancel => { window._axiosPromiseArr.push({ cancel }) }) return config }, error => { return Pr

vue页面切换中断ajax请求

qq_37162688的博客

01-23

2810

项目中遇到个问题，客户端要等服务端操作3到4秒后才能返回结果，这时候用户退出页面ajax请求还在进行，会影响性能。 axios中提供了两种方式解决中断ajax问题，这里我就说我用的这种。在main.js中加入以下代码； Vue.prototype.$http= axios; const CancelToken = axios.CancelToken; let cancel; Vue.proto...

vue 断开正在发送的请求_vue切换页面取消未完成接口请求

weixin_31512775的博客

12-24

4015

当vue切换页面时，尚未完成的接口由于异步原因，会造成报错等等问题，那么这时需要去取消这些接口的执行首先思路：页面A请求接口axios1 -->axios创建CancelToken对象保存请求至store变量CancelTokenArr -->当切换至页面B -->进入全局路由守卫调用vuex的清除CancelTokenArr方法 -->遍历CancelTokenArr清除...

前端连续发送同一个请求时，终止上一次请求

qq_43807473的博客

05-14

410

前端终止上一次请求

vue中axios多次相同请求中断上一个

次顶级的博客

09-21

2629

问题描述：在开发中，通过不同条件请求相同接口时，相同接口点击频率过快，会导致每次请求返回的时间无法控制，所以最终展示的数据可能不是最后点击返回的数据，导致数据展示错误。说白了就是：先发送的请求可能最后返回数据，导致展示的先发送请求返回的数据，后发送请求的数据被覆盖了。解决方案：请求相同接口时，中断上一个相同接口，这样避免数据展示错误。在api文件中代码如下。使用接口组件代码如下。

Vue切换页面时中断axios请求

m0_37437840的博客

07-11

910

Axios 提供了一个 CancelToken的函数，这是一个构造函数，该函数的作用就是用来取消接口请求的。

vue-router 跳转中断，iview的menu组件高亮不变

Miss_Liang的博客

05-09

3716

vue-router 跳转中断，iview的menu组件高亮不变场景：编辑页有保存与取消编辑按钮，用户编辑后未保存页面就进行跳转行为，弹框提醒用户是否继续跳转，用户点取消则停留在当前页面。技术点：1. 使用 vue-router 的 beforeRouteLeave 钩子在路由即将离开当前页面进行条件判断，满足条件则继续跳转 next()，否则不进行跳转2. vue-router 的 router...

vue页面缓存后，切换菜单时页面数据显示错误

qq_44842962的博客

02-16

484

问题:页面是一个具有筛选功能的报表详情页，对报表进行筛选后，切换菜单显示别的页面后，再次回到报表详情页后，页面显示初次进入页面时的数据，不是筛选后的数据原因:进入详情页时使用了query路由传参，多次切换菜单后，再次进入详情页，可能导致参数丢失，生成了两个报表详情页的缓存，所以偶尔会显示页面数据错乱解决办法:把路由跳转改成params不使用query，即可

vue项目路由跳转后上一页面未完成的接口取消

weixin_42349568的博客

12-28

1044

需要做到的是a页面发送请求,在还没有收到响应时,用户跳转B页面,这时候取消a页面的请求.

vue路由切换时取消之前的所有请求操作

07-08

在Vue路由切换时，如果你想取消之前的所有请求操作，可以使用axios库的取消请求功能。首先，在你的Vue项目中安装axios库： ```shell npm install axios ``` 然后，在你的请求代码中，创建一个axios的实例，并启用取消请求的功能： ```javascript import axios from 'axios'; // 创建axios实例 const instance = axios.create({ baseURL: 'https://api.example.com' // 替换为你的API地址 }); // 创建一个用于取消请求的取消令牌 const CancelToken = axios.CancelToken; let cancel; // 请求拦截器 instance.interceptors.request.use(config => { // 在每次请求前调用cancel函数取消之前的请求 if (cancel) { cancel(); } // 为每个请求添加取消令牌 config.cancelToken = new CancelToken(function executor(c) { cancel = c; }); return config; }, error => { return Promise.reject(error); }); export default instance; ``` 现在，你可以在Vue组件中使用这个axios实例来发送请求，并在切换路由时取消之前的请求： ```javascript import axios from '@/utils/axios'; export default { methods: { fetchData() { axios.get('/data') .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误 }); } }, beforeRouteLeave(to, from, next) { // 在离开当前路由时取消请求 axios.cancel(); next(); } } ``` 在上面的例子中，我们在组件的`beforeRouteLeave`导航守卫中调用了`axios.cancel()`函数来取消之前的请求。这样，当你切换路由时，之前的请求将被取消。这是一种基本的方法来取消之前的请求，你可以根据具体的业务需求进行适当的调整。