2

¿cómo puedo crear un círculo de carga, por ejemplo, cuando hago una petición XmlHtpp con Axios en mi vista con ReactJS?

Actualmente logro eso con la etiqueta <Get/> de la dependencia react-axios.

Ojo: react-axios no es axios. React Axios tiene COMPONENTES con etiquetas Get, Put, etc. Más información: react-axios - npm

Con el component <Get/> logro algo que me gusta mucho y es que puedo poner un Progress Loading, fijense en lo siguiente:

render() {
  return (
    <div>
      <Get url="/api/user" params={{id: "12345"}}>
        {(error, response, isLoading, makeRequest, axios) => {
          if(error) {
            return (<div>Something bad happened: {error.message} <button onClick={() => makeRequest({ params: { reload: true } })}>Retry</button></div>)
          }
          else if(isLoading) {
            return (<div>Loading...</div>)
          }
          else if(response !== null) {
            return (<div>{response.data.message} <button onClick={() => makeRequest({ params: { refresh: true } })}>Refresh</button></div>)
          }
          return (<div>Default message before request is made.</div>)
        }}
      </Get>
    </div>
  )
}

En la condición if(isLoading) perfectamente puedo colocar un componente de animación, por ejemplo, el <CircularProgress/> de MaterialUI. Esto funciona muy bien... Pero la lógica que necesito no me permite usar la etiqueta para peticiones con react-axios <Get/>.

Por esa razón, quisiera saber cómo o dónde poner un "Loading" durante una petición con Axios... Por ejemplo, si tuviera esto:

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

¿Dónde coloco mi <div>Loading...</div> mientras espero la respuesta o dónde manipulo una variable booleana para activarlo en el render? Que la variable se mantenga en false mientras espero la respuesta y cambie a true cuando recibe respuesta y ahí detengo la vista de que está cargando...

1 respuesta 1

4

Puedes usar this.setState para manipular el estado del componente cuando estas esperando la petición y cuando finaliza

async function getUser() {
  try {
    this.setState({isLoading: true})
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
  finally{
    this.setState({isLoading: false})
  }
}

usar finally para que el loading desaparezca aunque la petición resulte exitosa o falle

1
  • Ya lo había resuelto prácticamente de la misma forma, gracias por responder. No tuve que escribir la respuesta, jeje.
    – V0LT3RR4
    Commented el 24 dic. 2019 a las 20:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.