组件内或组件间如何取消上一次的ajax？

Question

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

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

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

Answer 1

不知道你是通过哪里使用的ajax。

如果是直接在组件里面使用的ajax：
第一种情况的时候，发送第二个ajax之前，使用abort方法停止上一次的ajax就好。
第二种情况，就在componentWillUnmount方法里面，用abort停止所有的ajax。

如果是在Redux里面使用的ajax，我没有想法。。。感觉要用middleware来解决，但是想不通怎么做。。。

Answer 2

取消不是一件很容易的事情，关于TCP三次握手的详细过程记不太清了，如果你发的ajax请求在服务端还没有response，那么使用abort的就可以，如果服务端已经response，除非你把网络断了，否则客户端不得不接收response，但其实大部分时候，服务端都能比你点击不同按钮的速度更快接收到ajax请求。

想要实现在任何时候阻止ajax是不可能的，任何规则都有约束，不是想做什么就能做什么。

解决你说的点击不同按钮出现异常的问题，从交互上简单做个小改动就行了，比如设置一个state为disable = true，如果点击发送ajax，则把disable设置为false，onClick事件也通过这个state来控制即可。

这是react中常用的通过state来控制组件各种状态的方法，非常简单方便。