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!
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.
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
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.
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 !
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
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...
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!
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
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
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...
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
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 ?
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
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
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.
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?
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
axios tiene algunas ventajas: - axios emite error si falla la llamada a la api - tiene mas compatibilidad al usar XMLHttpRequest(pare versiones antiguas de navegadores) fetch es una api del navegador, no tienes que importar nada pero tienes que implementar el manejo de errores, fetch solo emite errores por fallo en la red no por fallos en el servidor
Puedes usar ambas. con Axios te ahorras una lineas. De hecho se me olvidó hacer unas comprobaciones para los errores, que axios si te detecta automáticamente al contrario que Fetch.
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)
📘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!! 🤩
El unico video que explica el por que de todo y paso a paso
Excelente explicación lo de hacer el fetching de datos primero y luego renderizar, es lo que estaba buscando
Tienes el código visto en el vídeo, en el siguiente repositorio de GitHub
► github.com/carlosazaustre/react-fetch-pro
Esta es una forma excelente de optimizar mis peticiones get,.¡Te agradezco mucho el esfuerzo y la dedicación a este video!
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.
Una maravilla saber cómo funcionan las cosas por debajo.
Muchas gracias por estas perlas.
muy bien explicado y de una forma muy rapida , excelente tutorial
Saludos carlos comenzare de nuevo tus videos de React jamas me rendire
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
excelente forma de explicar y muy buena profundidad de contenido!!
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!
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.
Gracias por tanto , tu libro de Javascript es mi Biblia 👏👏👏
no sabia que era tan fácil consumir apis xD gracias me ayudaste muchisimo :D
¡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
minimo este tipo de videos debería estar en tendencia, aprendi muchisimo grande crack
Gracias me ayudaste a resolver una problema que tenia desde hace 2 dias, esoy nuevo en REACT
Muchas gracias, este video me sirvió para mejorar una app en la que trabajo ❤
Excelente explicación sobre todo la del. Abort no la sabía
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 :)
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 !
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
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 :)
Pasé días buscando un buen vídeo, explicas súper bien, gracias!
Gracias a ti Mitts! Te lo agradezco mucho ;)
Lo mejor que he visto, Gracias, Saludos desde Caracas Venezuela
Gracias por compartir tus conocimientos Carlos!!
Interesante justamente estoy trabajando en una app sencilla y necesitaba saber como usar de manera más eficiente el fetching, gracias.
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?
Que grande maestro!! También sería genial que hayas una versión para Post, Put, Patch y Delete
¡Explicas superbién, ojalá sigas subiendo material como este!
Excelente explicacion. aprendi varias cosas nuevas. Muy bueno!
Videazo, buenas practicas totalmente necesarias para poder hacer escalable el codigo!
Muchas gracias!
Que buen video si que es fetching like a pro, a partir de ahora solo haré fetchings like you xD
Genial, preciso estaba teniendo algunos problemas con la comunicación a las API. Gracias
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...
Estuve esperando este día 😂😂ajajja mas videos así 👌👌
Excelente video Carlos! Me sirvió mucho. 👌🙏🙌
muy bien video!! muchisimas gracias por el conocimiento 🔥 Me sumo a otros comentarios de hacer un proximo video con metodo post como un pro
Excelente video Carlos
Muchas gracias por tus contenidos ❤
Esto es oro puro.
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 👋
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 :)
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 video!...me suscribi!!
pedazo de video, muchas gracias
Súper 🙏🙏🙏 gracias amigo. Saludos
Me encanta! Muchas gracias
Muchas gracias Gabriela!
Buah! Me has venido como caído del cielo. A probar el Suspender 🤓
Gracias por el video, todo muy bien explicado. Nuevo subbbbb
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!
.
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 :)
maravilloso !, gracias carlos
Un placer 🫡
Buenos típs gracias por los vídeos compa
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 :)
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
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 :)
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...
👋 hey tremendo tips. Gracias por este valioso contenido.
Tienes de casualidad el como insertar datos de manera profesional consumiendo API con promise?, este video fue una maravilla, felicitaciones...
Gracias por el video
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
Menudo crack !!! Mis respetos :)
🤩🤩🤩
Super Informativo!!
Maravilloso contenido, Gracias!!!
Me encantó el theme de tu visual studio code.
cual usas??
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 ?
genial Carlos, buenos recursos. seria bueno algo que muestre como enviar peticiones POST PUT DELETE etc like a PRO
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
Excelente video.
Pero que tuto mas pro men!
Muchas gracias Aníbal! Me alegro que te haya gustado ☺️
Excelente video Carlos, como gastaría mas apps con un poco mas de frontend, y aplicar esto en diferentes ambientes.
gran video, como la mayoría de los que haces!
Mil gracias Miguel! 🤩
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 😅
Genial que buen video!!!
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
Buenas Carlos, esto mismo se podria hacer directamente dentro de UseContext, como para tener el estado "data" en toda la app=?
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!
que extension utilizas para el autocompletado del código??
Gran video 👌
Excelente!
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.
en caso de que la URL lleve query params, cuál sería la mejor forma de hacerlo?
idolo!
Awesome. Gracias :D
excelente video, como lo hacen para autocompletar textos?
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?
Buen video, una pregunta, fetchData siempre debe ir fuera del componente? en este caso fuera del componente App
que tema utilizas en el video Carlos???
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
Poderoso, se ve clean!, recomiendas mas esta manera, que instanciar axios?
axios tiene algunas ventajas:
- axios emite error si falla la llamada a la api
- tiene mas compatibilidad al usar XMLHttpRequest(pare versiones antiguas de navegadores)
fetch es una api del navegador, no tienes que importar nada pero tienes que implementar el manejo de errores, fetch solo emite errores por fallo en la red no por fallos en el servidor
Es Justo lo que trata de explicar en el video, sos o te haces? 😊
@@Iyawo8012 ohh muchas gracias bro!, se manejar fetch, pero aprendi a usar axios hace mucho, de distintas formas y no sabia este detalle
Puedes usar ambas. con Axios te ahorras una lineas. De hecho se me olvidó hacer unas comprobaciones para los errores, que axios si te detecta automáticamente al contrario que Fetch.
Como puedo enviar los datos de un front-end en react (vitejs) a un backen en typescript usando formdata y fetch?
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 ?
Que extension usas para autocompletar la sintaxis?
Muchas gracias por el video, esta genial, vas a subir el codigo a github?
Muchas gracias Victor!, se me olvidó subirlo, aquí lo tienes :)
► github.com/carlosazaustre/react-fetch-pro
10:46 no sería mejor un useRef para evitar renderizados extra?
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)
He estado el ultimo método con una tabla de NextUi pero no me deja mostrar los datos, me dice que no es compatible o algo al respecto