Как поставить реквести в очередь?

Question

[AlexKindGeek]

Всем привет. Есть у меня инпут, на него навешан обработчик

handleChange = (e) => {
    getExercises('exercises', 'exercises', e.target.value, null).then(list => console.log(list));
};

export const getExercises = (domenKey, apiKey, text, next_page, per_page) => {
  const domenPath = domen[domenKey],
        apiPath   = api[apiKey];

  let url = next_page ?
    `${domenPath}${apiPath}?current_page=${next_page}&page=${next_page}` :
    `${domenPath}${apiPath}?current_page=1`;
  url = per_page ?
    `${url}&per_page=${per_page}` :
    `${url}`;
  url = text ?
    `${url}&search=${text}` :
    `${url}`;
  return  Api.get(url).then(({data}) => data.data);
};

То есть как только у мы вводим в инпут значение, сразу посылаем запрос.
Все хорошо, НО когда мы вводим в инпут сразу например 10, то response сначала вернул объект, который совпал с 10, а потом тот, который с 1. Из-за этого у меня неправильно отрисовываются данные.



Я так понял - что тот запрос выполнился быстрее. Как можна решить данную проблему?

Answer 1

[Антон Спирин]

Для решения вашей задачи можно использовать debounce:

handleChange = e => {
  // handler
};
handleChangeDebounced = debounce(handleChange, 300);

<Input onChange={this.handleChangeDebounced} />

Если используете библиотеку lodash, то там есть реализация debounce

Comments

[Макс]

Данный механизм снижает вероятность подобной ошибки, но не устраняет этого бага. Первый отложенный запрос может выполняться дольше, чем запрос который будет запущен через (время_задержки +1).

[Антон Спирин]

Maxim, ну если время отклика сервера долгое и непредсказуемое, могу предложить такую альтернативу:

const takeLatest = request => {
  let last = 0;
  
  return async (params, cb) => {
    const current = ++last;
    const response = await request(params);
    
    if (current === last) {
      cb(response);
    }
  };
};

const latestRequest = _.debounce(takeLatest(request), 300);

search.addEventListener('input', (e) => {
    latestRequest(e.target.value, console.log);
});

Демо.

Тут точно ничего не проскочит, а debounce только для оптимизации.