Espere a que múltiples llamadas de API terminen utilizando el gancho personalizado useAxios.
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)
.
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 reutilizableuseAxios
. Así es como podemos modificar el código:useAxios
para cada solicitud:Promise.all
para esperar a que todas las solicitudes terminen:responses
contendrá un array de objetos, cada uno conaxiosData
yaxiosLoading
. Puede acceder a los datos de cada solicitud de esta manera:useMemo
para asegurarse de queuseAxios(data4)
solo se llame cuando todos los datos estén disponibles:Al usar
Promise.all
conuseAxios
, 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.