CÓMO CONSUMIR UN API con JAVASCRIPT desde la web
Вставка
- Опубліковано 18 тра 2021
- Una página web sin JavaScript no es una aplicación. Para que sea dinámica, necesitas que pueda consumir un servicio externo como puede ser un API REST.
En este video te cuento como hacerlo tanto con el método fetch de JavaScript, así como se hacía antiguamente antes de ES6 con el objeto XMLHttpRequest.
Podemos utilizar librerías y frameworks, pero aquí te cuento como hacerlo de forma nativa.
🔔 No olvides suscribirte y activar la campanita para no perderte ningún vídeo
► ua-cam.com/users/carlosazaustre?su...
🏆 Si te gusta el contenido que comparto, puedes apoyarme de una manera más directa uniéndote al programa de MIEMBROS del canal
► / @carlosazaustre - Наука та технологія
donde comprooo el sacooo lo necesito en mi vida
La sudadera te refieres? El Hoodie? Aquí, en youtube ua-cam.com/users/CarlosAzaustrestore ;)
@@CarlosAzaustre en Colombia no me abre el link :c
@@davidmontano7224 mira a ver si desde este otro te deja: carlosazaustre.creator-spring.com/
Mis felicitaciones Carlos, eres una persona muy buena en lo que haces y permites que las personas obtengan conocimiento de alta calidad.
Gracias por el contenido Carlos, me refrescaste la memoria sobre cómo implementar ajax antes de la llegada de fetch
Loco sos mi héroe, lo explicas mejor que en cualquier lado. Muchas gracias.
Excelente vídeo Carlos, no esperaba menos, ojalá próximamente vídeos consumiendo API's gratuitas :) Gracias por todo
Excelente video, justo lo que necesitaba. Gracias Carlos. Me encanta tu contenido.
fetch a partir de los 10 min. gracias Carlos. vi el tema hace poco y todavia lo estoy estudiando.
Increíble...mega interesante, nuevamente la sacas del parque.
Inmensamente agradecido Carlos.
Vale bro, necesitaba entender como consumir apis para terminar un proyecto que debo mostrar el Lunes a mi profesor, me salvaste.
Me alegro que te haya servido :)
El video y como lo explicas esta fantastico, me encantó.
Muy educativo, gracias. Excelente material
En agradecimiento solo dejo pasar la publicidad y entro a ella, agradecido contigo
siento que tus videos son como un curso de Udemy están muy completos, es excelente ver que alguien comparta tanta info de Javascript de forma gratuita
Muchas gracias Matías! Es un lujo saber que el contenido que comparto te sirva :)
@@CarlosAzaustre desde que tus videos me salian como respuesta a mis dudas, ví y supe que enseñas con pasión, porque te apasiona lo que enseñas. Felicidades.
Excelente contenido!! Gracias por el aporte Carlos!
Excelente @CarlosAzaustre te tomo la palabra un video de como consumir una Api desde ReactJs
Grande Carlos... Ahora me doy mas idea.... Genial muchas gracias 👏
Carlos, no te imaginas lo importante que es este video para mí, como desarrollador Front-End era el siguiente paso que tenía que dar...y lo lograre gracias a ti. En serio te lo agradezco.
Mil gracias a ti! Me alegra saber que el contenido es útil :)
Están muy buenos tus vídeos hombre, sería genial el ver cómo lo haces con react.
Estaría genial ver como lo haces con React, Gracias por el contenido!
React es exactamente lo mismo, no hay nada diferente. Con todo respeto, pero aprende bien JavaScript para luego aprende algún otro framework, ya que estas preguntas no se deberían hacer si es que aprendiste bien JavaScript
@@JohnKTB Gracias por tu aporte, muy constructivo
@@JohnKTB jajaja cálmense sabelo todo
@@JohnKTB obviamente es lo mismo en cuanto a pasos, obtener datos y pintarlos, todas las API funcionan así, no se que tiene que ver saber JS con saber React, así seas el dios del JS no vas a saber usar React por defecto.
@@pixeldvx Nadie habla de saber usar react, sino de cómo se consume una api lo cual es lo mismo que en js.
Bien explicado, si es una buena idea que hagas el ejemplo, de como consumir el API con React, para ver las diferencias con JS puro. Gracias
Pedazo de video, seria genial verlo con react, saludos desde chile
Excelente video, muy bien explicado, me gustaria que hicieras el video para react, Saludos
¡Gracias, gracias, gracias, gracias! No sabes el impacto que generas en mi al explicar tan sencillo. Gracias por compartir conocimiento Carlos. Abrazo de un mexicano. PD. Saluda a un nuevo seguidor!
Gracias a ti Rob! Me alegra saber que te ha servido el vídeo :)
Gracias Carlos, me encanta tu contenido. Me ha ayudado mucho en el bootcamp que estoy haciendo. Podrías hacer un video relacionado con firebase :) saludos desde colombia :D
Genial me ayudaste bastante, sería genial lo de react y consumir con vue una API, al igual de como guardar los datos en una variable para usar dentro de otra funcion.
Muchas gracias.
Excelente video Carlos. Gracias.
Gracias, me sirvio mucho ya que estoy aprendiendo fetch. Me gustaria aprender tambien como hacerlo en react.
Muy buen canal carlos muchas gracias por todo
Gracias, excelente. Una pregunta si no requiero prensentar un lista sono obtener el valor de las variable para colocarlo en un control asp
Gran Explicación Brother ;)
crees que puedas subir contenido por la parte front, viue y drupal???
Buenas Carlos! Muy buen vídeo! No soy programador ni nada, sé html y lo básico de css y js. Estaría genial que compartieras el código js de tu documento. Quiero mostrar en una página web las reseñas de clientes a través de la API del programa que recoge las reviews y ando un poco perdido.
Gracias!
Muchas gracias, al ppio no me funciono, pero le borre la const = tpl, y el enlace lo puse en fectch y ahi funciono.
Saludos !
GRACIAS! Muy buen aporte! Como siempre bien explicado! aprendo un monton con cada video, a la espera de Apis en React!!!! Como duda personal me gustaria un video aplicando estilos de forma asincrona ,despues del renderizado del DOM con la api ya cargada, ya que se me hace complejo mezclar la asincronia con el fetch , acabo en un mar d errores y undefineds XDDD!
Hola, excelente información. Me gustaría un vídeo usando Axios, he oído mucho de esta librería y quiero conocerla. Saludos.
Ese triple igual es demasiado 🤣, buen video!
Gracias por el video, excelente.
Acabo de consumir un API usando Javascript en produccion por primera vez. Solo me tomo mas de 8 horas para hacerlo bien jajaja pero tu video me ayudo bastante, de hecho hasta compre una de tus camisas, me subscribi y te di un like. Muchas gracias por tus videos sigue adelante. Bendiciones
Que grande Byron! Muchas gracias!!
Muchas gracias, muy bien explicado, una pregunta que pasa si quiero limitar el numero de datos para traer, es decir solo quiero mostrar 20 registros en la tabla.
Mil gracias por crear y compartir!
Excelente video, muchas gracias, no sé si yo estoy tonto pero me marcaba error en la línea para llamar la constante; aquí dejo otra forma de escribirlo por si a alguien más le pasa
xhr.open("GET", api + 'perros');
Q bien el enfoq desde vanilla js ...pintando-apis...ingeniosa e atinada frase
Jejej y mejor comunidad 👉 carlosazaustre.es/discord
Muy bien explicado Carlos te felicito, si me gustaria ver el video con react
Ya lo tienes! 😀
Cómo Consumir APIs en REACT como un PROFESIONAL
ua-cam.com/video/6u1RHUoXIPI/v-deo.html
Falto él fetch con async await y ya quedaría perfecto video 🙈, Muchas Graciias !
La segunda parte del video usa esa API.
Una consulta que configuraciones tenes en tu vscode?
Muchas gracias por tus amplias y excelentes explicaciones, con el tema de las API´s me he encontrado con la aturizacion hawk? he intentado realizar la autenticacion para poder consumir la API pero no he tenido exito, en postman si sirve la API pero ya en Javascript no me funcionnan los codigos que he intentado, podrias hacer un video con ejemplos de autenticacion?
Nuevamente gracias por compartir conocimiento y espero me pueda apoyar
Estaria genial ver como lo haces con ReactJS, quizas podrias hacer un video de como consumir la API de GoogleMaps y de GooglePlaces y de Facebook :D
Gracias por el excelente video!
Gracias Carlos excelente video, esperando al de APIs en React!!!!
Si pudieses hacer uno con ejemplos practicos de APis que incluya Async/await seria brutal!
Podemos mezclar ambas :)
Muy buen video, como todos!!!!!
Que barbaro me llegó ti tutorial :)
excelente video, me podrias decir que extensiones usas para autocompletar código?
Muy buen vídeo! Estaría muy bien que lo hicieras desde React. Mil gracias por compartir tus conocimientos!!
Gracias a ti por pasarte por aquí. Lo apuntamos!
Excelente video, me ayudó mucho! me gustaría poder hacer por ejemplo que cada elemento devuelto por la api se cliqueable, y luego generar otra pagina con mas datos de ese elemento específicamente, como deberia hacer? 😆
justo lo que necesitaba y recién salido del horno jaja
Muchas gracias Carlos...curso terminado
Genio Sebastián!! Espero que te hay servido!!
me ayudo mucho gracias
Enhorabuena Carlos y gracias!!! Una duda que me surge con lo de consumir una api. Imaginemos que tengo un frontend, proyecto hecho en html con javascript o react js o angular...entiendo que son proyectos separados no??? es decir, por un lado lo mejor es tener un proyecto con el frontend y luego otro proyecto con la configuración de la api: routes, models, app.js...etc...etc no? eso es correcto? Entiendo que sí para desacoplar cada capa y que por ejemplo si hay algún problema en la parte de backend: API, tocar solamente esa parte.
No tendría sentido juntarlo todo en 1 solo proyecto, es decir, tener el index.html y dentro del mismo proyecto las rutas, los modelos...etc...etc. ¿Qué opinas que es mejor? Soy un novato. Gracias!
Geniales tus videos!! Cómo sería consumir una API con jwt ?
carlos como estas ? tengo una inquietud como agregaste el icono del buzon ?
Muy interesante y práctico, falta con async await y con react ✌️👨🏻💻
6:31
Hubiera estado MUY BIEN que dijera que esos no eran comillas simples; sino: "backticks" o acentos graves. Ya decía yo que porqué no funcionaba xD
En este momento (8:54), en ese "user" que está antes del método .map: todavía no está rodeado ni de paréntesis ni de llaves, nada; y luego en este momento (9:08), ya aparece rodeado de... lo que, después de tantos intentos y revisiones a la documentación, descubriría que son unos malditos paréntesis: ese "user" es un parámetro: toda esa línea, descrita de izquierda a derecha es:
Una constante llamada "tpl" > uso de un método integrado en JavaScript llamada ".map" (que pone los valores retornados en un array sin modificar el array original) > el método ".map" tiene 3 parámetros, pero en este vídeo solo se usa 1 parámetro: la función de callback; como es una FUNCIÓN (anónima): ese "user" rodeado entre paréntesis es UN MALDITO PARÁMETRO.
Dios, me he tardado HORAS en comprender el porqué no funcionaba. Ese paréntesis rojo a mí me parecía unas llaves, entonces, rodeaba ese "user" con llaves, no con paréntesis.
Como recomendación para los próximos vídeos: estaría bueno que explique (después de terminar su código) lo que hace cada parte de su código de manera mucho más específica.
Tomo nota Laniakeam siento que te haya confudido. Gracias por tu feedback.
muy buen video!!!
Oye muchas gracias, me sirvió para realizar un test para una vacante. Saludos
Que bueno!! Me alegro mucho
Me interesa ver como consumir una api desde react, si fuera tan amable de mostrarnos el camino inicial, se lo agradecería mucho
Que software usa para crear sus videos, gracias
Excelente, saludos.
Le entendí muy bien a como explicas.
Muchisimas gracias! :) Me alegra que te sirviera mi explicación :)
Profe tienes algun curso donde se consuma api con token y tirarlo al datatable, gracias
Hola!! Tienes uno de estos cursos pero haciendo una petición post?
AMIGO MUCHAS GRACIAS!!! TENDRÍAS ESTE MISMO EJERCICIO PERO PARA UN POST?? ENVIO DE UN JSON HACIA UNA API CON METODO POST
Si ya puedo hacer eventos en el DOM , conosco las promesas, async function , se hacer peticiones por fetch y axios, puedo meterme a aprender react?
Estaría super que también lo hagas con react
exelente video :)
Claro que si, un video consumiendo una api con react
A la orden :)
Gracias hermano
Que extensión utilizas en code para javascript
Excekente video, pero tengo una consulta, con los dos primeros métodos me sale una coma (,) que no se como sacar, y en rl ultimo no sale. Como saco esa coma?
minuto 0:01 y le doy like porque sé que explica todo muy bien
Amigo necesito saber que es una apa y como se consumen eh visto varios videos ejercicios en paginas y eh buscadl en google pero todavía no tengo bien definido que es y como funciona el consumo de apis que me recomiendas hay?
gracias craaaack !
Hola, tengo una pregunta.
Excelente ejercicio, nunca habia usado Fetch, solo aprendí a usar la libreria de Axios.
Anteriormente cuando construyo mis propias API REST agrego cors para que reciba peticiones de cualquier parte, pero en este ejercicio me salió un error en el navegador Brave.
...from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, brave, chrome-untrusted, https.
Instalé extenciones pero al parecer no funcionó, ¿sabes cómo podria solucionarlo?
Sería un gran honor que me ayudaras, mil gracias.
Saludos Master.
Hola excelente video, sera que puedas hacer videos mas explicativos sobre el manejo del DOM
Lo tendré en cuenta. Un buen ejemplo es hacer un todolist, pero en JavaScript puro :)
Se puede proteger el apikey desde el frontend al consumir una api que requiera uso de una apikey?
hola claro que necistamos ver como es con react js a la espera brot
excelente!
Hola, 🖐️
Una consulta, si tengo un listado de registros (tabla) en mi página web, cómo puedo hacer para que se muestre de forma automática un registro que se acaba de insertar a la base de datos, pero sin refrescar la página...?? 🤔🤔
Saludos
Buen video pero de que manera sería mejor? consumir un Api mediante web(Javascript) o por parte de un lenguaje de servidor (java,php)
Gracias crack
Está muy bien la explicación, pero mi caso es algo diferente porque necesito leer la información de un API que está protegido por CORS, así que la respuesta que obtengo con el fetch es un error de cross-domain.
Cómo puedo hacer una consulta API con puro javascript cuando el servidor remoto me limita por cruce de d
ominios?
Pintar APIs usando Reactjs... Me encanta
Muy Buen video, Como se llama la fuente tipografica y el Tema que utilizas?
Muchisimas gracias!!!
Muchas gracias a ti Sandra, por tu apoyo! :)
claro con react super brutal
excelente
Como hago para detectar que el script que consume el servicio se está ejecutando desde mi sitio web y no desde la consola del navegador n veces. Tengo algunos botones en mi sitio web que en cada interacción con ellos le envío información a mi servidor. Pero hay usuarios que están generando sobrecarga en mi sitio web ya que los ejecutan en un bucle de la consola o algo así. Yo estoy usando captchav3 ahora, pero muchos clientes me reportan que no les funcionan algunos botones, y a veces deja de funcionar la pagina. Estuve buscando información y no encuentro como solucionar el problema.
Genial.
Suscríbete aquí: ua-cam.com/users/carlosazaustre
Y Sígueme tambien en:
▶ instagram.com/carlosazaustre
▶ twitter.com/carlosazaustre
▶ twitch.tv/carlosazaustre
Buenas Carlos, me ha gustado mucho como lo explicabas, el caso es que me hubiera gustado que usaras una api key y ademas que mostraras como se puede esa api key para que no la puedan ver inspeccionando el codigo. Mas que nada porque llevo tiempo intentando hacer eso y no consigo encontrar informacion que explique bien como hacerlo.
Gracias! Buen apunte ese, me lo apunto para hacer un video sobre ello :)
@@CarlosAzaustre por fin alguien intenta ayudarme
porque el codigo me da problemas al reconocer el signo pesos "$" ???, si lo uso para agregar la url antes del /users , me tira el error de /$%7BAPI_URL%7D/user, pero si dejo entera la URL en ese parámetro ya encuentra la API.
SOY TU FAAAAAAAANNNNN!