Я жду ответа от сервера, но хочу показать сообщение о тайм-ауте в пользовательском интерфейсе через 1 минуту, ожидая ответа. - PullRequest
Новая
       20

Я жду ответа от сервера, но хочу показать сообщение о тайм-ауте в пользовательском интерфейсе через 1 минуту, ожидая ответа.

0 голосов
/ 06 августа 2020

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

Q.when(api.getTask(taskId))
        .then(function(data) {
            dispatch({type:'GET_TASK_REQUEST', data});   
        }).then(function() {
            Notify.showSuccess('Get task was a success');
            dispatch({type: 'GET_TASK_SUCCESS'});
        }).fail(function(error) {
            Notify.showError(error);
            dispatch({type: 'GET_TASK_FAILURE'});
        });

    setTimeout(() => {
        if(isLoading)
            dispatch({type: 'GET_TASK_TIMEOUT'});
    }, 60 * 1000);

На основе действия GET_TASK_TIMEOUT, которое отправляется, если сервер все еще не вернул ответ, я установил состояние, чтобы показать уведомление о том, что операция занимает больше времени, чем ожидалось в пользовательском интерфейсе. Это правильный подход? Он выполняет свою работу, но я раньше не использовал тайм-аут таким образом, и я не знаю, правильный ли это способ go об этом.

1 Ответ

0 голосов
/ 06 августа 2020

Я покажу вам пример, в котором я использую fakePromise с 20000ms временем возврата, поэтому, если время больше, то 10000ms и обещание еще не разрешилось, он должен показать экран загрузки или все, что вы хотите. Я использую setInterval с startDate и endDate, которые обновляются на каждом интервале, а затем мы сравниваем 2 даты, чтобы проверить, больше ли оно 10000ms, вот код: 

   const fetchData = async () => {
  try {
    const sDate = new Date();
    let endDate;
    const LoadingResponse = setInterval(() => {
      if (endDate && endDate.getTime() - sDate.getTime() > 10000) {
        setLoading(true);
        clearInterval(LoadingResponse);
      } else endDate = new Date();
    }, 1000);
    const data = await fakePromise();
    clearInterval(LoadingResponse);
    setData(data);
  } catch (error) {
  } finally {
    setLoading(false);
  }
};

и здесь codeSandbox: пример

...