Podrías ocupar de base el hook del vídeo. La API de fetch te deja especificar que método HTTP tiene que utilizar, entonces puedes pasarlo como parámetro. Y luego pasarle un objeto para destructurarlo con la información que vayas a necesitar.
Realmente está explicado para hacer un fetch como un pro. Es un gusto ver tus videos Carlos, seguí haciendo tu valioso aporte a la comunidad. Un gran saludo desde Argentina!
Lo hice con axios, pero parece que no funciona con snakbar, vi tu otro video para los snakbars, pero no puedo hacerlos funcionar juntos este metodo con snackbars
Consulta profe, algo que no entiendo es en que momento se vería lo del Loading... ya que la idea es que si los user tardan en cargar, estaría bien que aparezca un Loading... o un Cargando usuarios...
Explicas super bien , esta super bueno el video, la verdad es que aprendí un monton de cosas nuevas a la hora de hacer peticiones fetch , gracias , espero puedas subir mas contenido asi !
Gracias por el vídeo!!! Aunque creo que el último ejemplo aunque evitemos renderizados también dejamos al usuario un poco sin saber que está pasando en casos de cargas lentas.
Yo opino igual, aunque si es verdad que cuando hay un error en vez de enviar un throw, mejor enviar un error y así cuando se hace llamada me duele un data con un error o un response, podría controlar un error.
Muchas gracias, Carlos!! Es increible la cantidad de herramientas que existen en React/Javascript. Un camino sin fin, pero con esta clase de videos, sin dudas, se hacen más llevaderos. Saludos y gracias, nuevamente.
Lo que me costó a mí entender el array vacío del useeffect y era algo tan simple como "se renderiza una vez cuando se monte el componente" eres dios Carlos ♥️
Si lo analizas bien useEffect no es más que una función que recibe dos parámetros un callback y un array de dependencia, si está vacío el array solo llama al callback una vez de lo contrario llamará cada que las dependencias cambien
hola! gracias por el video! consulta, que extensiones usas para el autocompletado de codigo y el control de errores a medida que vas escribiendo codigo? gracias!
Excelente aporte, solo me quedan dos dudas: La primera es como se podria controlar cuando el endpoint no da respuesta después de cierta cantida de segundos ? y la segunda es depronto porque así lo he trabajo en una plataforma de Ecommerce: porque se hace uso de Node JS para consumir los endpoint desde react ?
Me has explicado todo lo que no en la escuela. Tengo una pregunta, cual seria la ventaja de Axios? porque se entrada, Fetch no parece generar mas código que Axios...
Excelente video, he aprendido mucho 👍🏻. Solo tengo una consulta, en el segundo 14:02, no sería mejor usar un useRef en lugar de useState, para almacenar el AbortController? Ya que la función del useState no se está utilizando y solo se necesita acceder a la función abort de la instancia del AbortController. Solo pregunto, todos estamos aprendiendo 👍🏻
Hola genio, no soy experto pero creo que useRef se usa para otros enfoques, useRef obtiene una referencia única de un elemento del DOM, en cambio useState es para almacenar un estado. En este caso en vez de usar una variable let que va sobreescribiendo AbortController lo hace dentro de un useState, que es la magia de React. En la documentación dice que es preferible usar useState y evitar el useRef ya que es manejar el DOM de manera imperativa. El useRef usalo en casos que no quede otra, por ejemplo no lo uses para un input del form. Saludos , espero que sume el comentario
Gran material! Hubiese sido más interesante el ejemplo usando Typescript, para ver por ejemplo si se puede tipar el fetch o algo así. Saludos desde Santiago de Chile
Hola Buenas Tardes. Estaba viendo tu video y me gustaria saber por qué en la versión que usas la función fetchData la ejecutas fuera del componente App y no dentro justo antes del read?
Aplicando el último método, el pro, ¿Cómo podría manejar los errores? Cuando fuerzo un error en la petición, el componente no se renderiza, queda la pantalla en blanco, me gustaría que se mostrara igualmente el título y colocar un mensaje de error o algo por el estilo. ¿Cómo se podría hacer? Gracias.
Carlos, soy beginner y quiero construir un dashbard para consumir APIs de mis servicios Cloud SaaS que tebgo con clientes de Cisco, Extreme, Aruba.. que me recomiendas para empezar y probar?? Gracias por tus recomendaciones.
ese es el operador logico AND busca que 2 valores sean verdaderos, si ambos son verdaderos da true sino da false siempre por ejemplo: let hour = 12; let minute = 30; if (hour == 12 && minute == 30) { alert("La hora es 12:30"); } (en este caso daria true xq la hour es = 12 y los minute son = 30 basicamente con este operador comparas entre 2 valores, asi es mas facil de entender todavia a mi gusto
yo estoy teniendo un problema, cuando implemento el "AbortController" me deja de funcionar el "Loading", yo veo que se muestra como medio segundo y desaparece. Me di cuenta que cuando se renderiza el componente y se hace el fetch, el "AbortController" queda en "aborted" y siempre capturo en el catch un "AbortError" no se porque.
Carlos, una duda, si tengo una API que me envía un flujo constante y muy alto de datos, el método .aborto() no me funciona, ¿Tiene algo que ver con que la app está renderizado y se relantice?
Ahora bien, muy buen video y todo, pero que pasa cuando tengo que consultar al api por parámetros que me da el usuario? Eso funciona bien si es solo mostrar datos, pero normalmente siempre se reciben datos del usuario para poder buscar en api, los datos deseados, utilizando eso, como le pasaría parámetros de un formulario?
Hola Carlos, un gusto, el video esta maravilloso, pero en mi ultima aplicación me aparece el siguiente error: "A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition." ¿Alguna idea de como lo arreglo? Gracias :D
hola cuando hice lo del 6:36, me tiró el siguiente error: url is not defined. por lo visto ud tampoco definió URL pero si le funcionó, que pasa? (ya lo arreglé jaja, era un error mio)
debido a que el componente de que encapsula el fetch se renderiza al cambiar la url, como hago un "reload", intente creando una funcion dentro del hook...y no me funciono, alguna idea?...gracias!
Buen video, sería bueno tener también contenido respecto al uso de los RSC, que creo se están intentando hacer para manejar el renderizado del lado del servidor sin pasar tampoco por API
Muy interesante, eso sí, el fetch nativo no hace un throw si la request no devuelve un 2xx, si devuelve un 500 o 404 tienes que comprobarlo manualmente con un response.ok . Salu2
📘Mi nuevo libro "Aprendiendo React" ¡Ya a la venta!
amzn.to/3r83cjL
Nunca te quedas en lo básico. Siempre muestras ejemplos completos que aportan mucho valor.
Gracias.
viendo este video aprendí lo que no habia aprendido en mucho tiempo de estudio. No siempre puedo ver tus videos pero son joyas
Muchisimas gracias!! 🤩
Tienes el código visto en el vídeo, en el siguiente repositorio de GitHub
► github.com/carlosazaustre/react-fetch-pro
Gran material Carlos! Podras hacer en el futuro como hacer una request de POST, PUT y DELETE como un pro?
Podrías ocupar de base el hook del vídeo. La API de fetch te deja especificar que método HTTP tiene que utilizar, entonces puedes pasarlo como parámetro. Y luego pasarle un objeto para destructurarlo con la información que vayas a necesitar.
muy bien explicado y de una forma muy rapida , excelente tutorial
excelente forma de explicar y muy buena profundidad de contenido!!
Saludos carlos comenzare de nuevo tus videos de React jamas me rendire
Esta es una forma excelente de optimizar mis peticiones get,.¡Te agradezco mucho el esfuerzo y la dedicación a este video!
Una maravilla saber cómo funcionan las cosas por debajo.
Muchas gracias por estas perlas.
Carlos Gracias Hermano, mantente así mente a na` usted es bueno, Dios te bendiga.
gran video con este aprendi de una vez como usar fetch con react
Realmente está explicado para hacer un fetch como un pro. Es un gusto ver tus videos Carlos, seguí haciendo tu valioso aporte a la comunidad. Un gran saludo desde Argentina!
¡Crea tu perfil Freelance hoy en MOTIL. Utiliza el Código CARLOSJS para tener un descuento exclusivo!
► motil.page.link/Carolosjs
Lo hice con axios, pero parece que no funciona con snakbar, vi tu otro video para los snakbars, pero no puedo hacerlos funcionar juntos este metodo con snackbars
Lo otro que te quería preguntar es que en cuanto a desempeño, cual es la diferencia entre el custom hook useFetch vs fetchData?
Consulta profe, algo que no entiendo es en que momento se vería lo del Loading... ya que la idea es que si los user tardan en cargar, estaría bien que aparezca un Loading... o un Cargando usuarios...
Gracias por compartir tus conocimientos Carlos!!
Explicas super bien , esta super bueno el video, la verdad es que aprendí un monton de cosas nuevas a la hora de hacer peticiones fetch , gracias , espero puedas subir mas contenido asi !
no sabia que era tan fácil consumir apis xD gracias me ayudaste muchisimo :D
Gracias por el vídeo!!! Aunque creo que el último ejemplo aunque evitemos renderizados también dejamos al usuario un poco sin saber que está pasando en casos de cargas lentas.
Yo opino igual, aunque si es verdad que cuando hay un error en vez de enviar un throw, mejor enviar un error y así cuando se hace llamada me duele un data con un error o un response, podría controlar un error.
Que buen video , me gusta la temática de ir desde los más simple a lo más conplejo , gracias por todo nos ayudas mucho q todos 😊
Un placer :)
Lo mejor que he visto, Gracias, Saludos desde Caracas Venezuela
minimo este tipo de videos debería estar en tendencia, aprendi muchisimo grande crack
Gracias por tanto , tu libro de Javascript es mi Biblia 👏👏👏
Muchas gracias, Carlos!! Es increible la cantidad de herramientas que existen en React/Javascript. Un camino sin fin, pero con esta clase de videos, sin dudas, se hacen más llevaderos. Saludos y gracias, nuevamente.
A ti Juan Pablo! La verdad es que si, es la Historia Interminable xD Me alegro que te de algo de luz entre tanta herramienta y librería :)
Muchas gracias, este video me sirvió para mejorar una app en la que trabajo ❤
Pasé días buscando un buen vídeo, explicas súper bien, gracias!
Gracias a ti Mitts! Te lo agradezco mucho ;)
Lo que me costó a mí entender el array vacío del useeffect y era algo tan simple como "se renderiza una vez cuando se monte el componente" eres dios Carlos ♥️
Si lo analizas bien useEffect no es más que una función que recibe dos parámetros un callback y un array de dependencia, si está vacío el array solo llama al callback una vez de lo contrario llamará cada que las dependencias cambien
@@angelcg635 gracias amigo
Excelente explicación sobre todo la del. Abort no la sabía
Gracias me ayudaste a resolver una problema que tenia desde hace 2 dias, esoy nuevo en REACT
Excelente explicacion. aprendi varias cosas nuevas. Muy bueno!
Videazo, buenas practicas totalmente necesarias para poder hacer escalable el codigo!
Muchas gracias!
¡Explicas superbién, ojalá sigas subiendo material como este!
Que grande maestro!! También sería genial que hayas una versión para Post, Put, Patch y Delete
Interesante justamente estoy trabajando en una app sencilla y necesitaba saber como usar de manera más eficiente el fetching, gracias.
Que buen video si que es fetching like a pro, a partir de ahora solo haré fetchings like you xD
Excelente video Carlos! Me sirvió mucho. 👌🙏🙌
Estuve esperando este día 😂😂ajajja mas videos así 👌👌
Genial, preciso estaba teniendo algunos problemas con la comunicación a las API. Gracias
excelente video!...me suscribi!!
Buah! Me has venido como caído del cielo. A probar el Suspender 🤓
Excelente video Carlos
hola! gracias por el video! consulta, que extensiones usas para el autocompletado de codigo y el control de errores a medida que vas escribiendo codigo? gracias!
.
Tienes de casualidad el como insertar datos de manera profesional consumiendo API con promise?, este video fue una maravilla, felicitaciones...
Esto es oro puro.
muy bien video!! muchisimas gracias por el conocimiento 🔥 Me sumo a otros comentarios de hacer un proximo video con metodo post como un pro
Muchas gracias por tus contenidos ❤
Me encanta! Muchas gracias
Muchas gracias Gabriela!
Super interesante nunca habia usado el suspnese para el rederizado que exlente contenido
Ahora que ya se va saliendo de Beta, será el principal uso :)
Súper 🙏🙏🙏 gracias amigo. Saludos
Me encantó el manejo de promesas, imagino qué así se puede implementar en python u otro lenguaje que no tenga el async await. Me suscribo 👋
Ahora mismo no tengo mucho tiempo, pero en cuanto pueda ya me estare viendo todos tus videos de React de nuevo que están geniales.
Excelente aporte, solo me quedan dos dudas: La primera es como se podria controlar cuando el endpoint no da respuesta después de cierta cantida de segundos ? y la segunda es depronto porque así lo he trabajo en una plataforma de Ecommerce: porque se hace uso de Node JS para consumir los endpoint desde react ?
Gracias por el video, todo muy bien explicado. Nuevo subbbbb
Hola Carlos,
Por fin he encontrado alguien que me explique bien y para inutiles e noobs como funciona. Eres un maquina!!😂😂😂😂😂😂😂😂😂
Me alegro que te haya gustado :)
espectacular vídeo, tal vez un apéndice a este puede ser el uso de SWR o React Query
Buena idea. Lo tenía pendiente, a ver si saco tiempo para prepararlo :)
Me has explicado todo lo que no en la escuela. Tengo una pregunta, cual seria la ventaja de Axios? porque se entrada, Fetch no parece generar mas código que Axios...
Buenas Carlos, esto mismo se podria hacer directamente dentro de UseContext, como para tener el estado "data" en toda la app=?
Super Informativo!!
Maravilloso contenido, Gracias!!!
Me encantó el theme de tu visual studio code.
cual usas??
que extension utilizas para el autocompletado del código??
pedazo de video, muchas gracias
en caso de que la URL lleve query params, cuál sería la mejor forma de hacerlo?
Excelente video, he aprendido mucho 👍🏻. Solo tengo una consulta, en el segundo 14:02, no sería mejor usar un useRef en lugar de useState, para almacenar el AbortController? Ya que la función del useState no se está utilizando y solo se necesita acceder a la función abort de la instancia del AbortController.
Solo pregunto, todos estamos aprendiendo 👍🏻
Hola genio, no soy experto pero creo que useRef se usa para otros enfoques, useRef obtiene una referencia única de un elemento del DOM, en cambio useState es para almacenar un estado. En este caso en vez de usar una variable let que va sobreescribiendo AbortController lo hace dentro de un useState, que es la magia de React. En la documentación dice que es preferible usar useState y evitar el useRef ya que es manejar el DOM de manera imperativa. El useRef usalo en casos que no quede otra, por ejemplo no lo uses para un input del form. Saludos , espero que sume el comentario
Gran material! Hubiese sido más interesante el ejemplo usando Typescript, para ver por ejemplo si se puede tipar el fetch o algo así. Saludos desde Santiago de Chile
Muchas gracias @prodrigu75! Tengo en cuenta lo de TS, mi idea es crear contenido sobre TypeScript dentro de poco :)
👋 hey tremendo tips. Gracias por este valioso contenido.
Quien arrancando y a duras penas sabe qué es react?
Si aún estás en el tema, te recomiendo los API Rest en Js de JonMircha
maravilloso !, gracias carlos
Un placer 🫡
Buenos típs gracias por los vídeos compa
Hola Buenas Tardes. Estaba viendo tu video y me gustaria saber por qué en la versión que usas la función fetchData la ejecutas fuera del componente App y no dentro justo antes del read?
Como puedo enviar los datos de un front-end en react (vitejs) a un backen en typescript usando formdata y fetch?
Buen video, una pregunta, fetchData siempre debe ir fuera del componente? en este caso fuera del componente App
Aplicando el último método, el pro, ¿Cómo podría manejar los errores? Cuando fuerzo un error en la petición, el componente no se renderiza, queda la pantalla en blanco, me gustaría que se mostrara igualmente el título y colocar un mensaje de error o algo por el estilo. ¿Cómo se podría hacer?
Gracias.
Carlos, soy beginner y quiero construir un dashbard para consumir APIs de mis servicios Cloud SaaS que tebgo con clientes de Cisco, Extreme, Aruba.. que me recomiendas para empezar y probar?? Gracias por tus recomendaciones.
el user que usas en el .map , es una palabra que puede ser cuaquier palabra? o usas ese termino por que en el array que devuelve la api dice user ?
alguien se sabe algún video o alguna web, donde se explique la sintaxis esa de: loading && , data? osea el uso de &&, ?
Si loading es true entonces “que pase lo de aqui”
ese es el operador logico AND busca que 2 valores sean verdaderos, si ambos son verdaderos da true sino da false siempre por ejemplo:
let hour = 12;
let minute = 30;
if (hour == 12 && minute == 30) {
alert("La hora es 12:30");
} (en este caso daria true xq la hour es = 12 y los minute son = 30
basicamente con este operador comparas entre 2 valores, asi es mas facil de entender todavia a mi gusto
yo estoy teniendo un problema, cuando implemento el "AbortController" me deja de funcionar el "Loading", yo veo que se muestra como medio segundo y desaparece. Me di cuenta que cuando se renderiza el componente y se hace el fetch, el "AbortController" queda en "aborted" y siempre capturo en el catch un "AbortError" no se porque.
Genial, super facil. Me gustaria saber ahora donde esta el repositorio con el codigo para seguir probando
Hola Santiago! Muchas gracias, se me olvidó subirlo, aquí lo tienes :)
► github.com/carlosazaustre/react-fetch-pro
@@CarlosAzaustre
Muchas gracias! Me ha sido muy util, tus videos siempre me ayudan! 🙌
@@CarlosAzaustre Muchas gracias a vos, me ha sido muy util el video. Consumo mucho tu contenido, gracias por eso tambien!
Menudo crack !!! Mis respetos :)
🤩🤩🤩
Pero que tuto mas pro men!
Muchas gracias Aníbal! Me alegro que te haya gustado ☺️
Excelente!
Carlos, una duda, si tengo una API que me envía un flujo constante y muy alto de datos, el método .aborto() no me funciona, ¿Tiene algo que ver con que la app está renderizado y se relantice?
Excelente video Carlos, como gastaría mas apps con un poco mas de frontend, y aplicar esto en diferentes ambientes.
Excelente video.
Ahora bien, muy buen video y todo, pero que pasa cuando tengo que consultar al api por parámetros que me da el usuario? Eso funciona bien si es solo mostrar datos, pero normalmente siempre se reciben datos del usuario para poder buscar en api, los datos deseados, utilizando eso, como le pasaría parámetros de un formulario?
genial Carlos, buenos recursos. seria bueno algo que muestre como enviar peticiones POST PUT DELETE etc like a PRO
Hola Carlos, un gusto, el video esta maravilloso, pero en mi ultima aplicación me aparece el siguiente error:
"A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition."
¿Alguna idea de como lo arreglo?
Gracias :D
Debo estar omitiendo algo, al final lo hice con el segundo método y funciona perfectamente.
Muchas gracias! :D
me pasa lo mismo jaja , y deje el codigo que el tenia pero sigue dando lo mismo
Que extension usas para autocompletar la sintaxis?
excelente video, como lo hacen para autocompletar textos?
como se llama la extension que usas para que al poner .then te cree todo el elemento? Gracias por el video
a que se debe el uso de ?, antes del map? Gracias
que tema utilizas en el video Carlos???
hola
cuando hice lo del 6:36, me tiró el siguiente error: url is not defined.
por lo visto ud tampoco definió URL pero si le funcionó, que pasa?
(ya lo arreglé jaja, era un error mio)
debido a que el componente de que encapsula el fetch se renderiza al cambiar la url, como hago un "reload", intente creando una funcion dentro del hook...y no me funciono, alguna idea?...gracias!
gran video, como la mayoría de los que haces!
Mil gracias Miguel! 🤩
Gracias por el video
Lo que usas , que se ve el código antes de que lo escribas como en gris. Una sugerencia predictiva de el código que puede ir. Eso es github copilot?
Eso es :)
Cual extension en VSC te autocompleta el codigo?
Buen video, sería bueno tener también contenido respecto al uso de los RSC, que creo se están intentando hacer para manejar el renderizado del lado del servidor sin pasar tampoco por API
Genial que buen video!!!
Muy interesante, eso sí, el fetch nativo no hace un throw si la request no devuelve un 2xx, si devuelve un 500 o 404 tienes que comprobarlo manualmente con un response.ok . Salu2
Totalmente cierto Has Pin! Me malacostumbré a Axios 😅