react 组件关闭后怎么消除还在进行中的ajax

Question

我有一个列表，点击行会弹出modal框，根据每行的信息发送ajax，把结果显示在modal框里。

但是，
如果我点击第一行发送了请求，还没有结果的时候，我关闭了这个modal框，然后我点了第二行，这样又发送了一次请求。如果第一行的ajax卡了一会，比第二个还要晚，那么等待第一个完成后，应该是要覆盖掉第二次的结果吧。怎么解决这个问题呢。

Answer 1

把你的请求做成可以取消的， 这里的取消不是取消发送。 因为请求已经发送了，没有办法终止的。

所谓的取消其实就是取消回调函数， react官方给出了一种最佳实践。

const makeCancelable = (promise) => {
  let hasCanceled_ = false;

  const wrappedPromise = new Promise((resolve, reject) => {
    promise.then(
      val => hasCanceled_ ? reject({isCanceled: true}) : resolve(val),
      error => hasCanceled_ ? reject({isCanceled: true}) : reject(error)
    );
  });

  return {
    promise: wrappedPromise,
    cancel() {
      hasCanceled_ = true;
    },
  };
};

完整请查看官网：https://reactjs.org/blog/2015...

Answer 2

根据描述可以关闭模态框的时候用ajax的abort方法阻断还未完成的请求

Answer 3

unmount生命周期abort调ajax