Estoy enviando dos llamadas de búsqueda en Promise.allSettled() y renderizando componentes basados en el resultado, un componente con datos si se cumple y un componente de error si se rechaza. El problema es que cuando uno de ellos arroja un error, se procesa un componente de error, pero el componente con datos para otra llamada no se procesa. ¿Por qué está pasando esto?
código:
const sendRequest=useCallback(async (url)=>{ setIsLoading([true,true]); setError([null,null]); let response; try{ response=await Promise.allSettled( [fetch(url[0]),fetch(url[1])]); if(!response[0].value.ok){ throw new Error('Something went wrong'); } const data1=await response[0].value.json(); if(!response[1].value.ok){ throw new Error('Something went wrong'); } const data2=await response[1].value.json(); setItems([[data1.results],[data2.results]]); } catch(err){ if(!response[0].value.ok) {setError([err.message || 'Something went wrong',error[1]])}; if(!response[1].value.ok){setError([error[0],err.message || 'Something went wrong'])}; } setIsLoading([false,false]); },[])esto se debe a que setItems([[data1.results],[data2.results]]); no se llama al método, si alguna de sus solicitudes si da un error que está ejecutando throw new Error('Something went wrong') que hará que la ejecución del código capture el bloque y sus setItems([[data1.results],[data2.results]]); el método no se ejecutará. Por favor, eche un vistazo al siguiente código que resolverá su problema.
let error = false; if(!response[0].value.ok){ error =true; }else{ const data1=await response[0].value.json(); } if(!response[1].value.ok){ error =true; }else{ const data2=await response[1].value.json(); } setItems([[data1.results],[data2.results]]); if(error){ throw new Error('Something went wrong') }Mejoré el código anterior que fue publicado por @abhishek sahu. Es mejor trabajar con protectores de cláusulas cuando se verifican errores. Los errores no deben utilizarse como indicadores en el flujo. Cuando ocurre un error, debe lanzarse inmediatamente, no esperar hasta el final del código/función. Algún otro error podría ocurrir en el medio y no sabrá si usa banderas como errores.
const hanndleCallsAsync = async () =>{ if(!response[0].value.ok) throw new Error('Something wrong went with reponse0'); if(!response[1].value.ok){ throw new Error('Something wrong went with reponse1'); const data1=await response[0].value.json(); const data2=await response[1].value.json(); setItems([[data1.results],[data2.results]]); .... }Ahora, su código es mucho más corto y más fácil de leer y averiguar dónde ocurrió el error.