Как сделать динамический вывод данных при вводе данных в input?

Question

[Username]

Здравствуйте!
При вводе информации в инпут поле, происходит считывание значения и отправка его на сервер посредством ajax(axios).
Пользователь может вводить информацию быстрее, чем информация придёт с сервера.
Как мне написать экшен, который будет убивать предыдущий запрос на сервер?
Или есть решение получше, без удаления текущего запроса?

Answer 1

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

Можно написать простой хелпер withLatest вроде этого:

export const withLatest = request => {
  let last = 0;

  return (...args) =>
    new Promise((resolve, reject) => {
      const current = ++last;
      request(...args)
        .then(res => resolve({ isLatest: current === last, res }))
        .catch(err => reject({ isLatest: current === last, err }));
    });
};

async/await вариант

export const withLatest = request => {
  let last = 0;

  return async (...params) => {
    const current = ++last;
    try {
      const res = await request(...params);
      return { isLatest: current === last, res };
    } catch (err) {
      throw { isLatest: current === last, err };
    }
  };
};

Использование:

import Api from '../api';
import { withLatest } from '../utils';

const withLatestFetchData = withLatest(Api.fetchData);

export const fetchData = query => async (dispatch, state) => {
  dispatch({ type: "LOADING_DATA" });
  try {
    const { isLatest, res } = await withLatestFetchData(query);
    if (isLatest) {
      dispatch({ type: "DATA_SUCCESS", payload: res });
    }
  } catch ({ isLatest, err }) {
    if (isLatest) {
      console.log(err);
    }
  }
};

Демо.
В демо так же добавил debounce и небольшую вероятность завершения фейкового запроса ошибкой.

Answer 2

[coderisimo]

debounce
https://habr.com/post/60957/

есть готовые решения , о них, например вот здесь
https://webdevkin.ru/posts/frontend/kak-ispolzovat...

Answer 3

[Gunjoy]

Так же можно использовать функцию отчистки в useEffect
```js
useEffect(()=>{
запрос,
return () => {
console.log('отчищено')
}
},[zavis])
```
Почитай о ней, она отменяет прошлый результат запроса перед рендером ответа нового запроса. Помогает, кода юзеры оверкликают и отправляют много запросов на сервер.