Таймаут на Axios Requests

Question

Наш сайт в настоящее время имеет функцию фильтрации, которая извлекает новые данные через axios в зависимости от того, что фильтруется.

Проблема в том, что фильтр выполняется в режиме реального времени, и каждое изменение, сделанное с помощью реакции, вызывает запрос axios.

Есть ли способ установить таймаут для запроса axios, чтобы я мог получить только последнее состояние?

Answer 1

Я бы предложил использовать debounce в этом случае для запуска вызова API после указанной миллисекунды пользовательского ввода.

Но на всякий случай, если вам нужно добавить таймаут во время axios вызова, это может быть достигнуто как -

instance.get('/longRequest', {
  timeout: 5000
});

Answer 2

Из этой проблемы axios (Спасибо zhuyifan2013 за решение) я обнаружил, что axios timeout означает время ожидания ответа не время ожидания соединения .

Пожалуйста, отметьте этот ответ

Answer 3

Проблема состоит из двух частей.

Первая часть является отладочной и используется по умолчанию для прослушивателей событий, которые могут запускаться часто, особенно если их вызовы дороги или могут вызвать нежелательные эффекты.HTTP-запросы попадают в эту категорию.

Вторая часть заключается в том, что если задержка отладки меньше продолжительности HTTP-запроса (это верно для каждого виртуального случая), все равно будут конкурировать запросы, ответы приведут к изменениям состоянияс течением времени, и не обязательно в правильном порядке.

Первая часть адресована функцией debounce для уменьшения количества конкурирующих запросов, вторая часть использует Axios API аннулирования для отмены незавершенных запросов, когдаесть новый, например:

  onChange = e => {
    this.fetchData(e.target.value);
  };

  fetchData = debounce(query => {
    if (this._fetchDataCancellation) {
      this._fetchDataCancellation.cancel();
    }

    this._fetchDataCancellation = CancelToken.source();

    axios.get(url, {
      cancelToken: this._fetchDataCancellation.token
    })
    .then(({ data }) => {
      this.setState({ data });
    })
    .catch(err => {
      // request was cancelled, not a real error
      if (axios.isCancel(err))
        return;

      console.error(err);
    });
  }, 200);

Вот демо 1013 *.