axios cancelToken 如何在切换路由的时候来取消所有请求
发布于 8 年前 作者 lileilei 15388 次浏览 来自 问答

我用的是axios库,在快速切换页面的时候需要中断之前的请求,我想在切换路由时候统一管理。哪位整过?

3 回复

axios api不是很清晰,看了看源码发现,最后只能包装一下,用耽搁取消的方式进行管理。不能统一全局管理

怎么实现取消请求的,可以发个例子看看吗?API的例子是在发送请求时取消的,但实际应用中通常是由某个事件触发取消的,这个怎么弄?切换页面的时候中断之前所有请求又怎么弄?求指导

发现有小伙伴都有这个疑问。我发一下自己的解决方案。

1.封装axios的一个实例方法,加入CancelToken 这个中断请求的功能,并且在一个全局变量sources中保存 c 这个方法的地址,方便后面调用中断请求

export const post = function (url, opts, type) { var CancelToken = axios.CancelToken; var token = new CancelToken(function executor© { sources.push© }) return instance.post(url, { …opts }, { cancelToken: token, withCredentials: type ? false : true }) }

2.在组建生命周中销毁组建前调用的方法中调用取消方法即可

while (this.sources.length > 0) { this.sources.pop()(“中断请求!”) }

3.封装get方法同理即可

不足的地方就是 1.每个切换页面的组件都要调用。当然可以用hoc高阶组件简化 2.调用需注意,因为所有请求都会保存取消方法到全局变量,所以每次全部清除。如果有不需要取消的请封装不需要取消的请求方法即可!

更好的方案 如果用的react-redux之类的状态管理库,那么路由切换本身也是会dispatch一个action,所以我们可以在这里入中断未完成的请求即可

回到顶部