comerc Apr 26 2017 at 13:10

Загрузка данных из REST API

3 min

12K

Website development*JavaScript*ReactJS*

Tutorial

+10

Comments 13

comerc Apr 26 2017 at 13:52

Поступило мнение вне Хабра:

Собственно, в чем главная недодумка — это использование пары флагов вместо enum’а состояний. сам че-то такое же делал. начал на флагах, потом смотрю и думаю: что за хрень, у меня же может быть куча состояний для более-менее сложных компонент. Навскидку:

еще не начали загружаться [но хотим показать прелоадер а-ля фейсбук], собираемся загрузиться [ждем еще чего-то], загружается, не загрузилось с ошибкой, не загрузилось пустое, загрузилось пустое, загрузилось нормально, загрузили первую порцию [но сервер просит попросить еще попозже]

То есть для чего-то супер-простого это вполне ок решение, и если оно в стиле кода вашего проекта, претензий никаких нет (хотя за отсутствие propTypes, даже если флоу, я нашим джуниорам стучу по рукам).

Но для production quality — неаккуратненько.

andreylat Apr 26 2017 at 14:19

Спасибо за статью,
очень актуально что в ней подробно «разжевывается» вопрос для тек, кто «в танке»,
с пояснениями и ссылками, где почитать подробнее.
И, хотя, еще не вся картина мира react-redux ясно видится, но создается впечатление, что еще чуть-чуть и ее можно будет понять

aon24 Apr 26 2017 at 14:23

Это не велосипед, — обычное решение задачи.
У меня сделано примерно также (нет смысла выкладывать), только без редукса (строчек меньше и все в одном файле) и флаг «загрузка» зажигается через 500мс (у меня не веб-сайт, а приложение для работы с БД, — там почти все кэшируется).
В учебнике по CSS есть крутящийся кружочек вместо слова «загрузка»:
&ltdiv style="
margin: 10% auto;
border-bottom: 6px solid #fff;
border-left: 6px solid #fff;
border-right: 6px solid #c30;
border-top: 6px solid #c30;
border-radius: 100%;
height: 100px;
width: 100px;
-webkit-animation: spin .6s infinite linear;
-moz-animation: spin .6s infinite linear;
-ms-animation: spin .6s infinite linear;
-o-animation: spin .6s infinite linear;
animation: spin .6s infinite linear;
&gt&lt/div&gt

comerc Apr 26 2017 at 18:21

А если загрузка занимает меньше, чем 500 мс, то индикатор загрузки не показываем? Тогда, если загрузка занимает 750 мс, потребуется ожидать 1000 мс: 500 мс до индикатора + 500 мс с индикатором. Правильно я понял?

aon24 Apr 26 2017 at 19:07

Я включаю индикатор через 500мс, если загрузка не закончилась. В 90% он вообще не включается. Все пользователи в ЛС, справочники и формы в кэше браузера. По сети бегают только данные в небольших объемах. Повторю: у меня не веб-сайт.

comerc Apr 26 2017 at 22:37

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

aon24 Apr 26 2017 at 22:46

мигает, собака. Но редко и не раздражает. Это лучше, чем железные полсекунды (имхо).

aon24 Apr 26 2017 at 22:07

Для отладки даже написал диалоговый промис :)

function msgBoxYesNo(s) {
    return new Promise((yes, no) => {
        confirm(s) ? yes() : no();
    });
}

comerc Apr 26 2017 at 22:38

Прикольно. Забрал себе в чулан.

comerc Apr 26 2017 at 22:44

У меня тоже есть подобная поделка :)

export const sleep = (ms, reason = null) => new Promise((resolve, reject) =>
  setTimeout(() => {
    if (reason) {
      reject(reason)
      return
    }
    resolve()
  }, ms)
)

comerc Apr 28 2017 at 14:29

Светлое завтра на Material-UI (Alpha-версия).

comerc May 4 2017 at 22:13

react-loading-indicator

superyarik Apr 28 2017 at 14:29

с длинными например раскрывающимися списками будет некрасиво — контент будет прыгать при перерендере, мы делаем лоэдэр овэрлеем, который рисуется над контентом.

Show the best of all time