0
141
Views¿Está esperando la actualización de estado de la API con React Hooks (useEffect)?
Estoy tratando de lograr lo siguiente:
Usando React + React Hooks + useEffect
- Hacer una solicitud de publicación de API
- Recibir una identificación
- Realización de otra solicitud de publicación utilizando el ID para obtener el estado (En cola o Completado)
Así que básicamente
{ id: "xxxxxxx", status: "queued" }Es lo que recibo de vuelta. Ahora el tiempo de procesamiento varía, pero quiero verificar periódicamente si el estado ha cambiado de "en cola" a "completado". Y aunque no está completo, quiero mostrar una rueda giratoria de carga.
Cuál sería la mejor forma de hacer esto? ¿Sería esto posible con promesas/funciones asíncronas? ¿O tengo que usar algún tipo de intervalo para volver a verificar el estado periódicamente?
Básicamente estoy tratando de usar esto en React: https://docs.assemblyai.com/walkthroughs#authentication
·
Juan Pablo Isaza
1 answers
Answer question0
Podrías hacer algo como esto:
// Mocks - after the 2nd attempt getStatus will return "done" const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); let attempt = 0; const getId = async () => { console.log("getId"); await delay(); return { id: "id1" }; }; const getStatus = async (id) => { console.log("getStatus", { id, attempt }); attempt += 1; await delay(1000); return { id, status: attempt < 2 ? "queued" : "done" }; }; export default function App() { const [id, setId] = useState(); const [isDone, setIsDone] = useState(false); useEffect(() => { const effect = async () => { const { id } = await getId(); setId(id); }; effect(); }, []); useEffect(() => { let cancelled = false; const effect = async () => { let { status } = await getStatus(id); while (status !== "done") { if (cancelled) { return; } await delay(1000); status = (await getStatus(id)).status; } setIsDone(true); }; if (id) { effect(); } return () => { cancelled = true; }; }, [id]); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>{isDone ? "Done" : "Loading..."}</h2> </div> ); }Nota: esto está simplificado y no cubre escenarios de error, pero muestra cómo se puede armar.
·
Juan Pablo Isaza
Report
Answer question