0

Подскажите как сделать задержку для Fetch через setTimeout?

Есть такой вот метод:

const getSearchResult = search => {
    setLoading(true);
    fetch(`/api/search?query=${search}`)
      .then(response => {
        if (response.ok) {
          return response.json();
        } else if (response.status === 404) {
          history.push("/search");
        } else {
          throw response;
        }
      })
      .then(json => {
        setSearchResult(json);
        setLoading(false);
      });
  };

Нужно сделать так что бы данные отображались через минимум 1 секунду, но если данные не приходят дольше чем в 1 секунду loading должен продолжаться(Loader крутится), после получения данных убрать loader отобразить данные.

Вообщем так всё и работает. Но данные приходят слишком быстро и loader не успевает нормально отработать для этого и нужна задержка.

Спасибо )

2
  • Вы можете использовать await youtube.com/… 29 мар 2020 в 16:42
  • а в чем проблема? Указать setTimeout и передать в него функцию? const getData = ()=>setTimeout(getSearchResult, 1000);
    – CyberEd
    29 мар 2020 в 19:39

2 ответа 2

0

Задержку можно вынести в Promise и затем дожидаться пока закончатся оба: и запрос и задержка, и только в этом случае убирать лоадер.

для создание Promise с явным временем разрешения можно использовать функцию delay

function delay(timeout){
    return new Promise(r=>setTimeout(r, timeout))
}

Для ожидания обоих Promise можно использовать Promise.all

function delay(timeout){
    return new Promise(r=>setTimeout(r, timeout))
}

const getSearchResult = search => {
    setLoading(true);
    Promise.all(delay(1000),
      fetch(`/api/search?query=${search}`)
        .then(response => {
          if (response.ok) {
            return response.json();
          } else if (response.status === 404) {
            history.push("/search");
          } else {
            throw response;
          }
        })
        .then(json => {
          setSearchResult(json);
        }))
      .then(()=>{
          setLoading(false);
      });
};    
-1

Можно попробовать добавить промис:

    const getSearchResult = (search) => {
    const start = Date.now();
    const getSearchResult = (search) => {
       fetch(`/api/search?query=${search}`).then(response => {
            return new Promise(resolve => {
                const diff  = Date.now() - start;
                if (diff < 1000) {
                    setTimeout(() => {
                        console.log('1000');
                        resolve(response);
                    }, 1000-diff);
                } else {
                    resolve(response);
                }
            });
        })
        .then(response => {
            if (response.ok) {
                return response.json();
            } else if (response.status === 404) {
                history.push('/search');
            } else {
                throw response;
            }
        })
        .then(json => {
            setSearchResult(json);
            setLoading(false);
        });
};

В коде замеряется время выполнения запроса.. и если он меньше 1000 мс то оставшееся время мы отображаем лодер иначе не отображаем его.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.