axios如何取消重复请求 - TOMMYHU - 专注互联网开发及运营技术,提供相关资料及软件下载,奇趣网络时事评论!
Dec 14

axios如何取消重复请求 不指定

tommyhu , 09:28 , 软件分析与设计 , 评论(0) , 引用(0) , 阅读(82) , Via 本站原创 | |
就是xhr.abort(),不需要服务器确认。
axios/blob/master/lib/cancel/CancelToken.js#L22
axios/blob/master/lib/adapters/xhr.js#L153
the-abort()-method

在开发中,经常会遇到接口重复请求导致的各种问题。

对于重复的get请求,会导致页面更新多次,发生页面抖动的现象,影响用户体验。

对于重复的post请求,会导致在服务端生成两次记录(例如生成两条订单记录)。

如果当前页面请求还未响应完成,就切换到了下一个路由,那么这些请求直到响应返回才会中止。

无论从用户体验或者从业务严谨方面来说,取消无用的请求确实是需要避免的。

当然我们可以通过页面loading来避免用户进行下一次的操作,但本文只讨论单纯的如何取消这些无用的请求。

axios 的 cancelToken
axios是一个主流的http请求库,它提供了两种取消请求的方式。

通过axios.CancelToken.source生成取消令牌token和取消方法cancel

需要注意的是在catch中捕获异常时,应该使用axios.isCancel()判断当前请求是否是主动取消的,以此来区分普通的异常逻辑。
封装取消请求逻辑
上面有两种取消请求,用哪种都是可以的,这里使用第二种。

取消请求主要有两个场景:

当请求方式method,请求路径url,请求参数(get为params,post为data)都相同时,可以视为同一个请求发送了多次,需要取消之前的请求
当路由切换时,需要取消上个路由中未完成的请求
我们封装几个方法:

Map是ES6中一种新型的数据结构,本身提供了诸多方法,方便操作,适合当前场景。如果不熟悉的可以查看ECMAScript 6 入门。

在给config.cancelToken赋值的时候,需要判断当前请求是否已经在业务代码中使用了cancelToken

qs是一个专门用来转换对象和字符串参数的库,最初是由 TJ 创建并维护的,也是axios推荐使用的参数序列化库。这里我们的目的只是单纯的将参数对象转换为字符串方便拼接。

Map结构默认部署了Symbol.iterator属性,可以使用for...of循环直接获取键名和键值,当然你也可以使用for...in循环。

在 axios 拦截器中使用
主要的方法已经写好了,只需要添加到axios拦截器中就可以了。
  • 中查看更多“axios如何取消重复请求”相关内容
  • 中查看更多“axios如何取消重复请求”相关内容
  • 中查看更多“axios如何取消重复请求”相关内容
  • 中查看更多“axios如何取消重复请求”相关内容

  • 最后编辑: tommyhu 编辑于2021/12/14 09:39
    在此发表你对本文的看法:

    您的称呼(例如:乔布斯、tommyhu 等)

    emotemotemotemotemotemotemotemotemotemotemotemotemotemotemotemot