vue axios请求 取消上一个页面所有请求 批量取消请求

最新推荐文章于 2024-04-18 18:13:06 发布
最新推荐文章于 2024-04-18 18:13:06 发布
阅读量1.2w 收藏 14
点赞数 4
分类专栏： HTML5+CSS3+JavaScript NODEJS HTTP 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24833847/article/details/82454762
版权

SPA时代经常会遇到当前页面未加载完毕时跳转路由或者返回操作, 但是通过network会发现, 若网络环境较差的情况下, 会一直pending, 切换路由后在network中添加新的请求但是正在pending的请求依然存在. 当我们在项目中做了一个上拉加载分页的时候会一直加载中, 用户等待不耐烦后可能会主动触发返回操作, 但是此刻即使用户触发返回操作, 加载分页的请求还是存在, 页面还是会一直提示加载中, 直到该请求加载成功或超时才肯罢休

若想测试该效果的话, 大家可以通过chrome移动端模拟器进行模拟, 设置网络环境为Low-end mobile
低网速模拟

这时刷新, 将会看到已发出的请求会得到很漫长的响应, 这时我们进行路由更改操作, 会看到如下图
pending

这时我们想要达到的效果是这样的
取消请求

实现的思路是将cancel放置于全局变量的数组中, 可以挂在至window对象上或Vue示例上, 根据自己的情况去设计
关键代码

接着在路由切换时进行操作
取消请求以及删除

如有更完美的想法欢迎指教, 如有不正确之处请指出, 多谢

拾光未名
关注
  • 4
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
vue2 3 axios 请求重试、取消请求、loading 串行并行等（分享）_vue await 报错取消loading(1)
2401_84446580的博客
04-29 1073
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
在Vue组件化中利用axios处理ajax请求的使用方法
08-29
这种方式可以使 Axios 成为 Vue 的一个属性： ```javascript // 设置 Axios 请求的默认 host axios.defaults.baseURL = "https://www.ifilm.ltd/api/" // 将 Axios 绑定给 Vue 成为一个属性 Vue.prototype.$...
Axios cancelToken学习使用
Vgbire的博客
10-12 6584
参考axios官网 官网的有点难理解，自己看官方文档也搞了好久才明白，以下是我的总结。 axios发送请求时，添加cancelToken配置项可以用于取消请求，cancelToken的取值有两种方式 axios有一个CancelToken属性，他是一个类，用于获取取消请求的cancel方法，获取了该方法之后就可以在合适的地方执行cancel()取消请求了。这种方式比较麻烦，但是可以用于取消多个请求，你可以将c这个取消请求的方法push进一个数组，然后在你需要取消多个请求的时候，循环这个数组，依次执行里.
axios 取消请求:CancelToken
Allen的博客
12-01 9363
axios 取消请求:CancelToken
axios如何取消请求，其原理是什么？
study_way的博客
08-10 1805
axios如何取消请求
切换路由时如何关闭上一个页面的所有请求-axios cancelToken
hellolipop
11-25 1792
是什么偷走了我的网速 在项目中经常会遇到一个页面中存在很多的请求，这时候如果切换页面没有处理的话请求依然会存在 这是非常影响性能的一件事，特别是在网络情况不好的情况下，这只会让用户的网络体现的更慢。往往这时候我们不会再去等待页面慢慢的加载，这时候只会切换一个页面或者不停的刷新。 解决方法 那么我们改如何解决这个问题呢？理论很简单，在切换到下一个页面之前取消之前的请求就可以了。那么我们怎么操作呢？ 首先在axios的配置文件中加入以下代码 其中最重要的就是下图所示的这部分代码： 挂载方式全凭你的个
1. 创建一个vue实例
洪布斯的博客
12-26 566
vue.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
详解vue axios中文文档
08-29
Axios 还提供了批量请求的功能，可以使用 `axios.all` 方法来同时发起多个请求： ```javascript function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return ...
带进度条文件上传springboot+vue+axios+mint-ui
07-27
springboot开发服务后台，提供文件上传接口，vue.js搭建前端项目，mint-ui做为UI界面，axios与后端服务接口交互，axios可实时监控文件上传进度，通过mint-ui实时展示当前文件上传进度
Vue 中批量下载文件并打包的示例代码
10-18
在Vue.js开发过程中，有时我们需要实现批量下载文件并将其打包成一个压缩文件的功能。本文将详细讲解如何在Vue项目中实现这一功能，主要涉及的技术包括Ajax请求、JSZip库用于文件压缩以及File-Saver库用于保存生成的...
SpringBoot+AntDesignVue实现excel导入功能
07-20
在这个方法中，我们使用 FormData 对象来传递文件信息，并使用 axios 库来发送请求。 上传状态 在上传文件时，我们可以使用 file.status 属性来监控文件上传的状态。该属性可以返回上传状态，例如 uploading、done...
减少http请求次数
Jenya's blog
10-31 1098
http请求
vue如何强行停止ajax请求,Vue怎么进行ajax请求公共方法
weixin_34593328的博客
08-05 576
这次给大家带来Vue怎么进行ajax请求公共方法，Vue进行ajax请求公共方法的注意事项有哪些，下面就是实战案例，一起来看一下。为了减少代码的冗余，小编给大家推荐一篇介绍了决定抽离出请求ajax的公共方法的文章，供大家参考。我使用了ES6语法，编写了这个方法。/*** @param type 请求类型，分为POST/GET* @param url 请求url* @param contentTyp...
axios请求频繁，如何取消上一次请求
灰色头像@的博客
04-13 674
当事件中的代码执行耗费时间，且用户在短时间不断点击按钮，造成短时间多次触发了按钮的事件（不断向服务器发起请求）
vue3 + axios 中断取消接口请求
qq_37656005的博客
10-20 2702
弹窗中接口请求返回图片，用于前端展示，接口还没返回数据，此时关闭弹窗，需要中断接口请求tab标签页根据后端返回数据，依次渲染，频繁切换标签，需要中断接口请求for循环中请求接口，遇到跳出循环情况，也需要中断接口请求跳转路由，离开页面时，可能也需要中断接口请求下面就是根据以上问题，找到的解决方案。
axios 取消上一次的请求
最新发布
2301_76861208的博客
04-18 266
注意⚠️：在axios 0.21及以下的版本中可用api：CancelToken。在日常业务中，有时需要用到 ‘取消请求’（在防抖和节流不适用的情况下）。如果axios版本在 0.22 及以上可使用api：signal。
axios 中如何取消请求_从不会使用到精通原理_番茄出品
lazy_tomato的博客
02-24 7046
github-axios 点击跳转我去年阅读 源码的时候，默认版本还是 ，今年变成了 了，这个需要注意下。我对 版本号比较在意的原因是，看到过这句话： 整体源码不过千行，可模仿和学习的地方还是有很多的，互勉。由上述的截图可得，目前最新的 的取消请求api，推荐使用 。旧版本的 在 后弃用。官方示例 1.3.2 AbortController 2. CancelToken 使用案例 官方文档中的演示案例不太直观，我们搭建一个服务，本地调试一下。 2.2 后端服务代码 2.3 启
vue切换路由后取消未完成的axios请求
weixin_44416058的博客
06-08 3901
取消请求的必要性 在切换页面后，取消之前还未完成的axios请求，以免之前的请求结果影响当前页面的判断 原理 实现的原理： 1、取消axios请求的方法； 2、将当前页面的请求取消方法存在state中，在router.beforeEach()钩子函数中遍历执行该取消方法。 取消axios请求的方法 其实原理都是通过axios的cancelToken属性来实现，在封装好的axios中添加以下代码： const instance = axios.create({ // baseURL: '', time
vue项目中阻止某个接口请求
qq_39598092的博客
01-20 3216
let CancelToken = axios.CancelToken; let self = this; let urlP=`https://event.csdn.net/logstores/csdn-pc-tracking-page-exposure/track?${params.titleSymbol}`;//接口路径 因为是get请求 我就直接这么写了 axios.get...
springboot 批量删除 vue 前端axios
07-28
在Vue组件中，可以使用Axios发送DELETE请求来批量删除数据。首先，确保你已经在项目中安装了Axios依赖： ``` npm install axios ``` 然后，在Vue组件中，你可以通过以下方式使用Axios发送DELETE请求： ```vue ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值