CÓMO CONSUMIR UN API con JAVASCRIPT desde la web
ฝัง
- เผยแพร่เมื่อ 20 ก.ย. 2024
- 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.
¿Quieres ver como se hace con React? entonces tienes que ver este vídeo • Cómo Consumir APIs en ...
🔔 No olvides suscribirte y activar la campanita para no perderte ningún vídeo
► th-cam.com/users/ca...
🏆 Si te gusta el contenido que comparto, puedes apoyarme de una manera más directa uniéndote al programa de MIEMBROS del canal
► / @carlosazaustre
¿Quieres ver como se hace con React? entonces tienes que ver este vídeo th-cam.com/video/6u1RHUoXIPI/w-d-xo.htmlsi=3w5yMrykl4HPuGNe
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.
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.
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 :)
Mis felicitaciones Carlos, eres una persona muy buena en lo que haces y permites que las personas obtengan conocimiento de alta calidad.
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 :)
Excelente vídeo Carlos, no esperaba menos, ojalá próximamente vídeos consumiendo API's gratuitas :) Gracias por todo
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.
Suscríbete aquí: th-cam.com/users/carlosazaustre
Y Sígueme tambien en:
▶ instagram.com/carlosazaustre
▶ twitter.com/carlosazaustre
▶ twitch.tv/carlosazaustre
Loco sos mi héroe, lo explicas mejor que en cualquier lado. Muchas gracias.
fetch a partir de los 10 min. gracias Carlos. vi el tema hace poco y todavia lo estoy estudiando.
Falto él fetch con async await y ya quedaría perfecto video 🙈, Muchas Graciias !
La segunda parte del video usa esa API.
En agradecimiento solo dejo pasar la publicidad y entro a ella, agradecido contigo
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!!
¡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 por el contenido Carlos, me refrescaste la memoria sobre cómo implementar ajax antes de la llegada de fetch
Excelente @CarlosAzaustre te tomo la palabra un video de como consumir una Api desde ReactJs
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');
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!
Increíble...mega interesante, nuevamente la sacas del parque.
Inmensamente agradecido Carlos.
Grande Carlos... Ahora me doy mas idea.... Genial muchas gracias 👏
Me interesa ver como consumir una api desde react, si fuera tan amable de mostrarnos el camino inicial, se lo agradecería mucho
Excelente video, justo lo que necesitaba. Gracias Carlos. Me encanta tu contenido.
Q bien el enfoq desde vanilla js ...pintando-apis...ingeniosa e atinada frase
Jejej y mejor comunidad 👉 carlosazaustre.es/discord
Muchas gracias, al ppio no me funciono, pero le borre la const = tpl, y el enlace lo puse en fectch y ahi funciono.
Saludos !
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
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 :)
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.
El video y como lo explicas esta fantastico, me encantó.
Claro que si, un video consumiendo una api con react
A la orden :)
minuto 0:01 y le doy like porque sé que explica todo muy bien
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!
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
th-cam.com/video/6u1RHUoXIPI/w-d-xo.html
Gracias, me sirvio mucho ya que estoy aprendiendo fetch. Me gustaria aprender tambien como hacerlo en react.
Pedazo de video, seria genial verlo con react, saludos desde chile
Están muy buenos tus vídeos hombre, sería genial el ver cómo lo haces con react.
Muy educativo, gracias. Excelente material
Oye muchas gracias, me sirvió para realizar un test para una vacante. Saludos
Que bueno!! Me alegro mucho
Ese triple igual es demasiado 🤣, buen video!
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
Excelente video, muy bien explicado, me gustaria que hicieras el video para react, Saludos
Le entendí muy bien a como explicas.
Muchisimas gracias! :) Me alegra que te sirviera mi explicación :)
Excelente contenido!! Gracias por el aporte Carlos!
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!
Pintar APIs usando Reactjs... Me encanta
Muchas gracias Carlos...curso terminado
Genio Sebastián!! Espero que te hay servido!!
Hola, excelente información. Me gustaría un vídeo usando Axios, he oído mucho de esta librería y quiero conocerla. Saludos.
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.
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?
justo lo que necesitaba y recién salido del horno jaja
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 claro que necistamos ver como es con react js a la espera brot
Gran Explicación Brother ;)
crees que puedas subir contenido por la parte front, viue y drupal???
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? 😆
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
Excelente video Carlos. Gracias.
Supongo que si le pones type="module" puedes poner la etiqueta en el header y dejas el body mas limpio, ya que se ejecuta cuando se termina de cargar en el HTML.
La costumbre
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.
Muy buen canal carlos muchas gracias por todo
Muy interesante y práctico, falta con async await y con react ✌️👨🏻💻
la api ahi es http, para un https que puedo poner ya que manda un error de access to script from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, https, ipns, chrome-untrusted, ipfs, data, chrome, chrome-extension.
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
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
Gracias, excelente. Una pregunta si no requiero prensentar un lista sono obtener el valor de las variable para colocarlo en un control asp
Mil gracias por crear y compartir!
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
Estaría super que también lo hagas con react
Carlos que buen video, un detalle, como le quitariamos las comas a la peticion del objeto xhr, quiero decir, cuando pintamos la data en el HTML se generan unas comas al final de cada elemento, como se le removeria esa coma?
Buenas, muy tarde pero podes hacer un join("") para convertir a string, ya que esas comas aparecen porque es una array. Seria algo asi:
const template = data.map(user => `${user.name}, ${user.email}`);
const templateToString = template.join('');
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)
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?
me ayudo mucho gracias
Que barbaro me llegó ti tutorial :)
No entendí nada, pero buen video.
edit: no es que no sepas explicar, es que aún no llego a estos temas en mis cursos.
Gracias por el video, excelente.
Profe tienes algun curso donde se consuma api con token y tirarlo al datatable, gracias
excelente video, me podrias decir que extensiones usas para autocompletar código?
Gracias por el excelente video!
Geniales tus videos!! Cómo sería consumir una API con jwt ?
Muy buen video, como todos!!!!!
2021, otro ejemplo con Jsonplaceholder. Madre mia.
Gracias hermano
Una consulta que configuraciones tenes en tu vscode?
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 :)
claro con react super brutal
muy buen video!!!
Muchas gracias Carlos. Sabes cómo consumir servicio soap con respuesta xml y definición por wsdl desde javascript? Muchas gracias por considerarlo!
Ufff creo que en mis tiempos de universidad usé algo de eso, pero mi cabeza lo borró xD
COMO USAR API CON REACT
Se puede proteger el apikey desde el frontend al consumir una api que requiera uso de una apikey?
Hola!! Tienes uno de estos cursos pero haciendo una petición post?
gracias craaaack !
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.
carlos como estas ? tengo una inquietud como agregaste el icono del buzon ?
Me ha dado pena romper el número 666 de likes jajajajajaja.Buen video
For once, the software is actually really useful
Pero entonces las API REST son inseguras? Es decir, cualquiera puede ver el codigo de nuestra pagina y ver los llamados a las API y modificando los indices obtener cualquier dato, incluso los que pudieran no estar permitidos para ese usuario
AMIGO MUCHAS GRACIAS!!! TENDRÍAS ESTE MISMO EJERCICIO PERO PARA UN POST?? ENVIO DE UN JSON HACIA UNA API CON METODO POST
excelente!
Excelente, saludos.
exelente video :)
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?