Как я могу использовать django api из react frontend

Я новичок в React, я написал конечную точку Django API для выполнения некоторого вида sync. Я хочу, чтобы эта API вызывалась со React страницы, при нажатии на TextLink - скажем Sync Now, как я должен это сделать? На основе ответа от API (200 или 400/500), я хочу показать Sync failed, при успешной синхронизации, я хочу показать Sync Now снова, но с другим текстом Last Sync Time: DateTime (для этого я добавил ключ в мою модель Django), как я могу использовать и это.

Кроме того, у меня есть вопрос, скажем, вместо Sync Now и Synced у нас есть еще одно состояние Syncing, которое находится там до тех пор, пока не будет возвращен успех или неудача, Является ли опрос с сервера хорошим вариантом, или есть какой-либо другой способ. Я знаю о websockets, но не уверен, какой из них можно использовать эффективно.

Я застрял здесь на 3 дня без реального прогресса. Любая помощь будет полезна. Заранее спасибо.

Вы настроили ваше приложение django для связи с фронтендом react?

Я бы сделал что-то вроде этого: 

// Store last sync date in state with default value null

const [lastSyncDate, setLastSyncDate] = useState(null);
const [isLoading, setIsLoading] = useState(false);

const handleApiCall = async () => {
  try {
    setIsLoading(true);
    const response = await fetch('api.url');

    if (response.status === 200) {
     const currentDate = Date.now().toString();
     setLastSyncDate(currentDate);
    }

  }
  catch(error) {
    // handle error here
  }
  finally {
    setIsLoading(false);
  }
  
}

if (isLoading) {
  return 'Loading...';
}

return (
 <div onClick={() => handleApiCall()}>
   {lastSyncDate !== null ? `lastSynced: ${lastSyncDate}` : "Sync now"}
</div>
)
Вернуться на верх