Реагировать, дождаться определенного c ответа от API

Question

У меня есть страница, которая ожидает от сервера c статуса.

Дело в том, что у сервера есть статусы - (Enabled, In_Progress, Disabled), и он возвращает 200 также для In_Progress.

Я думал об asyn c, но проблема в том, что сервер вернет ответ в случае In_Progress.

Есть ли способ дождаться, пока API вернет «Включено» "? Или мне нужно отправлять запрос каждые X секунд?

ИЗМЕНИТЬ

У меня есть возможность изменить ответ (502 вместо 200) на стороне сервера, если это помогает.

Спасибо

Answer 1

Я бы использовал что-то вроде ниже:

const useStatusServer = ({ pollingInterval }) => {
  const [status, setStatus] = useState();
  useEffect(() => {
     const interval = setInterval(() => {
      axios.get('blabla url')
        .then(({ status }) => {
            setStatus(status);
            if (status === "Enabled") {
                clearInterval(interval); // optional poll deactivation
            }
        });
    }, pollingInterval);
    return () => {
       clearInterval(pollingInterval);
    };
  }, [pollingInterval]);
  return { status };
};

Теперь вы можете использовать этот хук в одном из компонентов, из которого вы хотите получить это значение, с помощью:

const { status } = useStatusServer(1000); // timeout in ms

Если вам нужно использовать более одного раза выше хука, я бы преобразовал его в контекст с помощью constate или поднял хук до предков, чтобы вы могли передать значение в качестве реквизита нескольким дети

Answer 2

Это сильно зависит от реализации этого API на стороне службы. В идеальной ситуации используется что-то вроде Websockets или Server side events. В основном это означает, что сервер сообщит клиенту (React), когда он будет готов.

В вашей ситуации отправка нескольких запросов до состояния Enabled является правильным решением. Вы можете реализовать с помощью setInterval и clearInterval . Примерно так:

const pollInterval = setInterval(() => {
   let result = doRequest();
   if (result == "Enabled") {
      this.setState({ ready: true }, () => {
          clearInterval(pollInterval)
      });
   }
}, 1000); // The interval is in milliseconds, so 1000ms = 1s