Отменить запрос, если есть новый (обещания)

Question

Я отправляю запрос на сервер каждый раз, когда пользователь что-то вводит. Я использую 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. Это не дубликат вопросов здесь, я проверил предоставленные решения, но они мне не помогают

Answer 1

Даже я пытался использовать функцию debounce в своем коде, но проблема в том, что если пользователь печатает очень быстро, останавливается, а затем снова начинает печатать, в этом случае ваши входные значения обновляются, а пользовательский интерфейс искажается, чтобы избежать этого, я использовал XMLHttpRequest и abort() для отмены предыдущих вызовов, если вызовы не удаются, он будет отменен,

Вы можете попробовать это решение, https://stackoverflow.com/a/55509957/9980970

Answer 2

Проблема похожа на этот .Axios 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.