dalv_happy
@dalv_happy

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

Здравствуйте!
При вводе информации в инпут поле, происходит считывание значения и отправка его на сервер посредством ajax(axios).
Пользователь может вводить информацию быстрее, чем информация придёт с сервера.
Как мне написать экшен, который будет убивать предыдущий запрос на сервер?
Или есть решение получше, без удаления текущего запроса?
  • Вопрос задан
  • 399 просмотров
Пригласить эксперта
Ответы на вопрос 2
rockon404
@rockon404 Куратор тега React
Frontend Developer
Можно написать простой хелпер 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 и небольшую вероятность завершения фейкового запроса ошибкой.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы