如果有新请求则取消请求（承诺）答案

【问题标题】：Cancel request if there is new one(promises)如果有新请求则取消请求（承诺）
【发布时间】：2018-11-19 09:47:58
【问题描述】：

每次用户输入内容时，我都会向服务器发送请求。我使用 debounce 来延迟 400 毫秒：

type = debounce((text) => {          
      this.props.actions.loadInfo(text) 
  }, 400);

当我输入内容时，停止并重新开始并重复，发送了几个请求并且我收到了不相关的数据。我使用承诺：

export const loadInfo = (text) => dispatch => {
  loadData(text).then(result => {
    dispatch(showUserData(result));
  });
};

export const loadData = async (text) => {
  const tabData = await axios.get(`url&query=${text}`);
  return tabData;
}

如果用户发送新请求（当他输入内容时），我需要以某种方式取消先前的请求，最好的方法是什么？我预计去抖动会帮助我，但不会。我用axios。这与此处的问题不重复，我检查了提供的解决方案，但对我没有帮助

【问题讨论】：

stackoverflow.com/a/26735236/2630817
1) 我使用 axios 2) 不会像我在其他情况下尝试过的那样工作
再次，没有正确答案
@rick1 “正确”是什么意思？我相信我自己的答案是正确的，否则我不会链接它。
如果通过去抖动loadData 解决了这个问题，它应该类似于0bin.net/paste/…。希望这可以帮助。还注意到我链接的帖子中的演示是错误的，修复了它，stackblitz.com/edit/react-ecsbrz。此评论中的链接也有误，已更新，抱歉。

标签： javascript promise axios cancellation

【解决方案1】：

问题类似于this one。 axioscancellation API可以用来取消旧的请求。这应该在一个执行请求（loadData）并且可以直接访问 Axios 的函数中完成，它也可能被 debounce：

let cancelObj;

export const loadData = debounce((text) => {
  if (cancelObj) {
      this.cancelObj.cancel();
    }

  cancelObj = CancelToken.source();

  return axios.get(`url&query=${text}`, {
    cancelToken: this._fetchDataCancellation.token
  }).catch(err => {
    // request wasn't cancelled
    if (!axios.isCancel(err))
      throw err;
  });
}, 200);

由于使用了Redux，其他解决方案可能会涉及到它，这取决于Redux的使用方式。

【讨论】：

【解决方案2】：

即使我尝试在我的代码中使用 debounce 功能，但问题是如果用户输入非常快停止然后再次开始输入，在这种情况下，您的输入值会更新并且 UI 会失真，为了避免这种情况我使用了 @ 987654322@和它的abort()取消之前的调用，如果调用不成功则取消，

你可以试试这个解决方案，https://stackoverflow.com/a/55509957/9980970

【讨论】：