es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Espere a que múltiples llamadas de API terminen utilizando el gancho personalizado useAxios.

Espere a que múltiples llamadas de API terminen utilizando el gancho personalizado useAxios.

02 Aug, 2023 Programación

Uso el hook personalizado useAxios para evitar la duplicidad de código, ya que la API que estoy llamando siempre es la misma.

import { useState, useEffect } from 'react';
import rest from './rest';     // dentro se encuentra la definición del baseURL de axios.create...       

const useAxios = (endpoint, queryString) => {

  const [axiosData, setAxiosData] = useState(null);
  const [axiosLoading, setAxiosLoading] = useState(true);

  useEffect(() => {

    const getRest = async () => {
      setAxiosLoading(true);
      try{
        const sensors  = await rest
        .get('/'+ endpoint + '?' + queryString)
        .then(res => {
          setAxiosData(res.data);
          setAxiosLoading(false);
        });
      }catch (e) {
        console.log(e);
      }
    }

    getRest(); 

  }, [endpoint,queryString])

  return {axiosData, axiosLoading}; 

}
export default useAxios;

Aquí hay una parte del código donde llamo al hook useAxios.

const {axiosData:data1} = useAxios('request1','');
const {axiosData:data2} = useAxios('request2','querystring1');
const {axiosData:data3} = useAxios('request3','querystring2');

El problema que estoy tratando de resolver es cómo esperar a que todas las solicitudes finalicen para asegurarme de que todos los datos estén listos.

Conozco el método axios.all y me gustaría usar algo así, pero con el uso del código reutilizable como con useAxios.

Nota importante: hay muchas llamadas a useAxios en la aplicación, no solo el caso que explico aquí. Esa es la razón por la que estoy tratando de reutilizarlo en lugar de usar solo un axios.all

EDITADO:
Puede que lo haya mencionado antes, pero también hay otra llamada a useAxios (data4) en un subcomponente que utiliza los datos de data1, data2, data3 y debería renderizar otro subcomponente tantas veces como objetos haya en data1. Paso los datos a través de la API de Contexto y necesito asegurarme de que los datos de data1, data2, data3 estén disponibles antes de la llamada a useAxios (data4).

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para esperar a que todas las solicitudes terminen y asegurarse de que todos los datos estén listos, podemos usar Promise.all con el gancho reutilizable useAxios. Así es como podemos modificar el código:

    1. Crear un array de solicitudes:
    const requests = [
  { endpoint: 'solicitud1', queryString: '' },
  { endpoint: 'solicitud2', queryString: 'querystring1' },
  { endpoint: 'solicitud3', queryString: 'querystring2' }
];
    1. Mapear el array y llamar a useAxios para cada solicitud:
    const axiosResponses = requests.map(request => useAxios(request.endpoint, request.queryString));
    1. Usar Promise.all para esperar a que todas las solicitudes terminen:
    useEffect(() => {
  Promise.all(axiosResponses).then(responses => {
    // manejar las respuestas aquí
  });
}, []);
    1. La variable responses contendrá un array de objetos, cada uno con axiosData y axiosLoading. Puede acceder a los datos de cada solicitud de esta manera:
    const data1 = responses[0].axiosData;
const data2 = responses[1].axiosData;
const data3 = responses[2].axiosData;
    1. Si necesita pasar los datos a un subcomponente, puede usar el gancho useMemo para asegurarse de que useAxios(data4) solo se llame cuando todos los datos estén disponibles:
    const data4 = useMemo(() => {
  if (data1 && data2 && data3) {
    // llamar a useAxios con data1, data2, data3
  }
}, [data1, data2, data3]);

    Al usar Promise.all con useAxios, podemos reutilizar fácilmente el gancho y asegurarnos de que todos los datos estén disponibles antes de renderizar los componentes que dependen de ellos.

Comments are closed.