axios取消请求,axios取消请求发送

vue路由跳转取消上个页面的异步请求

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

那么如何解决这个问题呢，方法就是监听路由，在路由切换前将上个页面的请求取消。

第一步：

axios请求头设置

第二步：

利用vuex，新建一个store.js，将取消方法cancel放到数组中，然后在路由守卫中把数组中存有的cancel方法都执行

第三步：

监听路由

到此就可以解决路由跳转后上个页面的请求还在pending的状态啦

如果想去掉控制台的console.error

至此完美解决，亲测有效！！！

处理重复请求

在我们的日常开发当中，很多时候会出现短时间内接口重复请求的情况，如果没有妥当地处理，很可能会造成以下的影响：

以一定的频率发送请求，即在特定时间内只允许发送一次请求：

适用于频繁触发并且需要给予用户一些反馈的场景，如：resize、scroll、mousemove

间隔时间大于指定时间才发送请求：

方案1，2 时间间隔不好把控，并且因为会丢失掉部分请求，因此只能针对get请求；

方案3看起来最笨，等待时间长，请求未减少，但因为他将请求排成了一个队列，所以可以避免post请求导致数据数据絮乱的情况；

方案4的请求未减少，并且实际上也无法控制该请求是否已经到达服务器，但该方案保证了在前端不执行无效的响应回调；

根据项目的实际情况，我最终选择了方案4，而该方案刚好可以通过axios的 cancelToken来实现。

设置一个列表pendingList，用于存储当前处于pending的请求，在每个请求发送之前，先判断当前请求是否已经存在于pendingList中。若存在，则说明该请求已被请求过，造成了重复请求，这时候则需要把重复的请求cancel，再把新请求添加到pendingList中。若不存在，则说明这个请求是干净的，可进行正常请求，同时也需要把这个请求添加到pendingList中，在请求结束后再把该请求从pendingList中移除。

其中，我们可以通过axios cancelToken来取消请求

axios提供了两种方法来取消请求

设置一个列表pendingList，用于存储当前处于pending的请求

提供getFetchKey方法，用于生成各个请求的标识，当为GET请求时，因为只用于获取数据，因此只要当method和url都一致时，我们就可以认为这是同一请求，而其他请求则还需要加上请求的参数。

添加请求到pendingList

把请求从pendingList移除

把请求从pendingList移除并取消该请求

在拦截器中添加以上方法

最后，因取消请求抛出的error我们不应该返回给用户，使用axios.isCancel()判断当前请求是否是主动取消的

React - 实现fetch取消、中止请求

项目开发过程中有时会遇到这种情况：两次查询请求相隔时间很短时，由于 接口异步 ，第一次请求可能会覆盖第二次请求返回数据，所以需要在第二次请求前先将第一次请求中止，话不多说，实现如下：

关于axios取消请求网上有很多，可自信百度，本文主要针对于fetch请求，由于fetch并没有 "取消请求" 方法，目前通过AbortController()实现

项目：Ant.Design Pro + umijs + dva

新建一个abortDispath.js文件

新建一个扩展Component

demo.js

request.js 文件中需要将signal放在options中，例如