vue路由变化时使用axios取消所有请求

在项目中有这样的场景，一个菜单进去表格loading状态发送请求此时请求处于pending状态找个时候我们切换菜单，另一条请求也发出去了，找个时候之前的请求也完成了，就会出现你在另一个页面数据对不上或者上条请求报错确在你找个页面发生，所以就找了一下解决办法。一开始我以为axios是没有取消请求这一东西得。想法时在请求接收或者失败的回调都进行router的判断，判断当前router是否和发请求前的一样来操作。后来还是找到axios官方时有一个函数来取消发送请求的cancelToken这函数。

具体用法。

http.interceptors.request.use(config => {
config.cancelToken = store.source.token

return config

}, err => {
return Promise.reject(err)

})

router.beforeEach((to, from, next) => {
const CancelToken = axios.CancelToken

store.source.cancel && store.source.cancel()store.source = CancelToken.source()next()

})

// 全局变量

store = {
source: {
token: null,

    cancel: null

}

vue路由变化时使用axios取消所有请求相关推荐

关于 axios 取消重复请求的分析
前言关于取消重复请求,最重要的是这么做的意义,而不在于代码的实现其实,我觉得,绝大部分能够想到的应用场景,都可以通过防抖.节流方式实现,比如实时搜索,比如重复订单提交.比如上拉获取最新数据等我们 ...
[react-router] React-Router 4怎样在路由变化时重新渲染同一个组件？
[react-router] React-Router 4怎样在路由变化时重新渲染同一个组件? 1.在同一个组件添加不同的key,以下重新封装了组件: export default function ...
axios取消接口请求
自己碰到的问题,扒了很多文档才理清楚,当做是笔记记下来说到取消接口请求,可能没碰到这样的坑冷不丁还有点懵,为什么会有取消请求这回事,既然决定要请求这个接口了又要取消它,岂不是有点画蛇添足的操作? 1 ...
Vue——路由变化页面数据不刷新问题
在项目中出现的情况是路由变化后,url变化了,但是页面没有刷新,手动刷新一下才出现应有的画面. 情况一: 在 github 的 vue-router 中找到同样的一个问题:3.0.1版本通过route ...
axios delete有请求体吗_封装 axios 取消重复请求
编者按:本文作者舒丽琦,奇舞团前端开发工程师在我们web开发过程中,很多地方需要我们取消重复的请求.但是哪种场合需要我们取消呢?我们如何取消呢?带着这些问题我们阅读本文. 阅读完本文,你将了解以下内 ...
封装 axios 取消重复请求
编者按:本文作者舒丽琦,奇舞团前端开发工程师在我们web开发过程中,很多地方需要我们取消重复的请求.但是哪种场合需要我们取消呢?我们如何取消呢?带着这些问题我们阅读本文. 阅读完本文,你将了解以下内 ...
【JS】Axios取消未完成请求解决Tab频繁切换数据问题
一.场景描述 Tab切换频率较低.数据返回速度理想的情况下,几乎不用考虑这个问题.切换频率高如果不处理未完成的请求不仅会严重影响页面性能,由于浏览器并发请求限制,也可能会造成后续请求超时.另外一个较为 ...
vue路由切换时内容组件的滚动条回到顶部
情景描述 1.页面 /a, 有输入框, 当输入框输入合适的值的时候, 不隐藏软键盘, 点击相应按钮直接跳到 /b 2.页面 /b, 页面本来内容很少, 没有滚动条的, 可是莫名的被下方的灰色区域顶到可 ...
Vue项目首页_使用axios发送ajax请求
安装axios: npm install axios --save 在Home.vue中发送一个ajax请求,然后把数据传递给子组件. 在Home.vue中: import axios from ' ...
Vue路由之axios配置JWT身份验证
前言: 认证和授权,其实吧简单来说就是:认证就是让服务器知道你是谁,授权就是服务器让你知道你什么能干,什么不能干(例如下面meta元信息),认证授权俩种方式:Session-Cookie与JWT,下面 ...

vue路由变化时使用axios取消所有请求

vue路由变化时使用axios取消所有请求相关推荐

最新文章

热门文章