Question

每当用户键入内容时，我都会向服务器发送请求。我将去抖用于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。这不是这里的问题重复，我检查了提供的解决方案，但对我没有帮助

Answer 1

问题类似于this one。 Axios cancellation API可用于取消旧请求。这应该在执行请求（loadData）并且可以直接访问Axios的函数中完成，也可以将其反跳：

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的使用方式。

Answer 2

即使我尝试在代码中使用反跳功能，但问题是，如果用户键入非常快就停止，然后再次开始键入，在这种情况下，您的输入值将被更新，UI会失真，为避免这种情况，我使用了{ {1}}及其XMLHttpRequest取消先前的通话，如果通话失败，则会取消通话，

您可以尝试此解决方案https://stackoverflow.com/a/55509957/9980970

如果有新的，则取消请求（承诺）

2 个答案: