react组件内或组件间如何取消上一次的ajax？
发布于 2 年前 作者 qingmingsang 3530 次浏览 来自 问答

两种场景，一种是组件内比如说一个input，点击了button A，ajax请求，然后改变input内的内容，但是在A的ajax请求还没结束时，就点击了button B，也发送了一个ajax请求，这时候input的内容可能就会有异常。

第二种场景，就是组件切换的时候，初始化ajax一般是写在componentDidMount中，这个时候如果ajax请求还没结束，就切换到了另一个组件中，上一次的ajax请求并不会结束。

第一种场景可能可以通过一些function的限定解决问题，那么第二种呢？是否有什么比较通用的方法能取消上一次的ajax请求？

13 回复

vue 配合 superagent 或者 axiso 或者 纯ajax就知道。 写个插件，在生命周期结束同意cancel掉ajax。 这几个都有cancel

1

fetch现在还不行,推荐axios

@Binaryify 是的我现在用的就是fetch

@AnzerWall 那么如果是写在redux或者flux 的请求如何取消呢？

1

@qingmingsang 我不懂react。。。 看了眼fetch，好像没暴露出cancel的语法，promise也不是cancelable的。。

如果你用的是fetch-polyfill，你可以尝试fork一个然后把里面的xhr暴露出来。。 然后xhr.abort(); 或者再用bluebird包装一下promise，让他cancelable。。

如果是原生fetch。。。The Next Generation 看看这个讨论https://github.com/whatwg/fetch/issues/27

建议换用包装完善的superagent和axios

@qingmingsang https://github.com/search?utf8=✓&q=fetch+cancel 我没细看，你应该可以找到可以用的

@AnzerWall 用的是polyfill，后面了解到fetch本身没有abort的方法已经封装上了。 这个issue 15年讨论到现在似乎都没有实现。。。。。。

@AnzerWall 多谢你的回答

1

Rxjs 响应式编程，恭喜你可以入坑了。

@ratelgogo 简略看了下似乎是一种观察者模式的实现，那么相比较非常轻量的观察者模式的实现和redux这种稍重的实现的区别是什么呢？

@qingmingsang redux是状态管理工具，当基于操作是同步时很舒服（当然异步也有很多实现方式，但是RxJS更加舒服，两者着重点不同），RxJS是解决异步请求和基于事件的一个类库，可以一起使用。

@ratelgogo rxjs和redux一起用要加插件吧？redux-observable？

rxjs +10086

回到顶部