CÓMO CONSUMIR UN API con JAVASCRIPT desde la web

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
► kzbin.info...
🏆 Si te gusta el contenido que comparto, puedes apoyarme de una manera más directa uniéndote al programa de MIEMBROS del canal
► / @carlosazaustre

[@CarlosAzaustre]

¿Quieres ver como se hace con React? entonces tienes que ver este vídeo kzbin.info/www/bejne/bKaUg3uLpL18hqssi=3w5yMrykl4HPuGNe

[@matias25pinto]

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

[@CarlosAzaustre]

Muchas gracias Matías! Es un lujo saber que el contenido que comparto te sirva :)

[@rafanavassud]

@@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.

[@andres-mora-vanegas]

Mis felicitaciones Carlos, eres una persona muy buena en lo que haces y permites que las personas obtengan conocimiento de alta calidad.

[@alejandrofuentes4857]

Estaría genial ver como lo haces con React, Gracias por el contenido!

[@JohnKTB]

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

[@alejandrofuentes4857]

@@JohnKTB Gracias por tu aporte, muy constructivo

[@aldoaltamirano1103]

@@JohnKTB jajaja cálmense sabelo todo

[@pixeldvx]

@@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.

[@JohnKTB]

@@pixeldvx Nadie habla de saber usar react, sino de cómo se consume una api lo cual es lo mismo que en js.

[@LoquendoElHistoriador]

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.

[@CarlosAzaustre]

Mil gracias a ti! Me alegra saber que el contenido es útil :)

[@carandev]

Excelente vídeo Carlos, no esperaba menos, ojalá próximamente vídeos consumiendo API's gratuitas :) Gracias por todo

[@fedg8943]

Loco sos mi héroe, lo explicas mejor que en cualquier lado. Muchas gracias.

[@CarlosAzaustre]

Suscríbete aquí: kzbin.info Y Sígueme tambien en: ▶ instagram.com/carlosazaustre ▶ twitter.com/carlosazaustre ▶ twitch.tv/carlosazaustre

[@gadhager]

fetch a partir de los 10 min. gracias Carlos. vi el tema hace poco y todavia lo estoy estudiando.

[@Pandatantei]

Vale bro, necesitaba entender como consumir apis para terminar un proyecto que debo mostrar el Lunes a mi profesor, me salvaste.

[@CarlosAzaustre]

Me alegro que te haya servido :)

[@dasrdomingo]

En agradecimiento solo dejo pasar la publicidad y entro a ella, agradecido contigo

[@arielass11]

Grande Carlos... Ahora me doy mas idea.... Genial muchas gracias 👏

[@ramartiner]

¡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!

[@CarlosAzaustre]

Gracias a ti Rob! Me alegra saber que te ha servido el vídeo :)

[@jonathanbriceno3865]

Increíble...mega interesante, nuevamente la sacas del parque. Inmensamente agradecido Carlos.

[@cristiantapiaolivera2234]

Gracias por el contenido Carlos, me refrescaste la memoria sobre cómo implementar ajax antes de la llegada de fetch

[@lewlealdevops]

Excelente @CarlosAzaustre te tomo la palabra un video de como consumir una Api desde ReactJs

[@josele7666]

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!

[@Pipo6280]

Excelente video, justo lo que necesitaba. Gracias Carlos. Me encanta tu contenido.

[@captainsupermacho]

El video y como lo explicas esta fantastico, me encantó.

[@carolinasalomrivero4788]

Muy educativo, gracias. Excelente material

[@byrontista4801]

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

[@CarlosAzaustre]

Que grande Byron! Muchas gracias!!

[@javiertoscano1508]

Excelente contenido!! Gracias por el aporte Carlos!

[@hamelhmc]

Falto él fetch con async await y ya quedaría perfecto video 🙈, Muchas Graciias !

[@jrbr-r5j]

La segunda parte del video usa esa API.

[@ignacioarriagadairiarte4338]

Pedazo de video, seria genial verlo con react, saludos desde chile

[@aureliojmnz2959]

Q bien el enfoq desde vanilla js ...pintando-apis...ingeniosa e atinada frase

[@CarlosAzaustre]

Jejej y mejor comunidad 👉 carlosazaustre.es/discord

[@joaquinrodriguez5917]

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');

[@javierfernandez5064qq]

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!

[@mauricioyanzon]

Muy bien explicado Carlos te felicito, si me gustaria ver el video con react

[@CarlosAzaustre]

Ya lo tienes! 😀 Cómo Consumir APIs en REACT como un PROFESIONAL kzbin.info/www/bejne/bKaUg3uLpL18hqs

[@boek7742]

Le entendí muy bien a como explicas.

[@CarlosAzaustre]

Muchisimas gracias! :) Me alegra que te sirviera mi explicación :)

[@saulomartinez1153]

Me interesa ver como consumir una api desde react, si fuera tan amable de mostrarnos el camino inicial, se lo agradecería mucho

[@juliopaez7635]

Gracias, excelente. Una pregunta si no requiero prensentar un lista sono obtener el valor de las variable para colocarlo en un control asp

[@alvarobernabey2338]

Muy buen canal carlos muchas gracias por todo

[@amedhernandezcampos2018]

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

[@carolinaloaiza2924]

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.

[@franciscogilt]

Excelente video Carlos. Gracias.

[@TheSebasgg]

Muchas gracias Carlos...curso terminado

[@CarlosAzaustre]

Genio Sebastián!! Espero que te hay servido!!

[@diegogoncalvez162]

Muchas gracias, al ppio no me funciono, pero le borre la const = tpl, y el enlace lo puse en fectch y ahi funciono. Saludos !

[@CapitanSaultt]

Claro que si, un video consumiendo una api con react

[@CarlosAzaustre]

A la orden :)

[@dvsys751]

Una consulta que configuraciones tenes en tu vscode?

[@jdev6132]

minuto 0:01 y le doy like porque sé que explica todo muy bien

[@juanpasten6077]

Mil gracias por crear y compartir!

[@LikeDePollo]

excelente video, me podrias decir que extensiones usas para autocompletar código?

[@antoniosuperify]

Ese triple igual es demasiado 🤣, buen video!

[@abrahamcornejo3377]

Gran Explicación Brother ;) crees que puedas subir contenido por la parte front, viue y drupal???

[@javyy8a]

Que barbaro me llegó ti tutorial :)

[@criaturaimaginaria5230]

justo lo que necesitaba y recién salido del horno jaja

[@oscaralvarez1519]

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?

[@valentinbegnis]

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('');

[@submareal5972]

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!

[@CarlosAzaustre]

Podemos mezclar ambas :)

[@LaniakeaArmstrong]

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.

[@CarlosAzaustre]

Tomo nota Laniakeam siento que te haya confudido. Gracias por tu feedback.

[@noeliafernanda1061]

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

[@migtapiab]

Excelente video, muy bien explicado, me gustaria que hicieras el video para react, Saludos

[@anferneevalera4861]

Están muy buenos tus vídeos hombre, sería genial el ver cómo lo haces con react.

[@danielcordero1169]

Gracias por el excelente video!

[@florenciaretamozo6115]

carlos como estas ? tengo una inquietud como agregaste el icono del buzon ?

[@jjjdelacruz87]

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.

[@mochilero]

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?

[@lucychan7390]

Gracias, me sirvio mucho ya que estoy aprendiendo fetch. Me gustaria aprender tambien como hacerlo en react.

[@evelynbotia2288]

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

[@felixverdugo8438]

Muy buen video, como todos!!!!!

[@carlosutrera3900]

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?

[@luislarios1024]

Oye muchas gracias, me sirvió para realizar un test para una vacante. Saludos

[@CarlosAzaustre]

Que bueno!! Me alegro mucho

[@JFERVC]

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.

[@titoworlddev]

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.

[@CarlosAzaustre]

Gracias! Buen apunte ese, me lo apunto para hacer un video sobre ello :)

[@titoworlddev]

@@CarlosAzaustre por fin alguien intenta ayudarme

[@carlosvasquezjohanson1854]

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

[@franciscoberrocal700]

Hola, excelente información. Me gustaría un vídeo usando Axios, he oído mucho de esta librería y quiero conocerla. Saludos.

[@parkinmicro4579]

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?

[@cesarantunes4004]

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? 😆

[@mauriciotorres6815]

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?

[@eduardoalveo4136]

Se puede proteger el apikey desde el frontend al consumir una api que requiera uso de una apikey?

[@rodrigomunoz9217]

AMIGO MUCHAS GRACIAS!!! TENDRÍAS ESTE MISMO EJERCICIO PERO PARA UN POST?? ENVIO DE UN JSON HACIA UNA API CON METODO POST

[@banjersing1]

Profe tienes algun curso donde se consuma api con token y tirarlo al datatable, gracias

[@luismaestro23]

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)

[@pablolancho6278]

Muy buen vídeo! Estaría muy bien que lo hicieras desde React. Mil gracias por compartir tus conocimientos!!

[@CarlosAzaustre]

Gracias a ti por pasarte por aquí. Lo apuntamos!

Geniales tus videos!! Cómo sería consumir una API con jwt ?

[@TheSebasgg]

Hola!! Tienes uno de estos cursos pero haciendo una petición post?

[@ricardoyalico3513]

Excelente, saludos.

[@emmanuelsaavedra6037]

me ayudo mucho gracias

[@NorthShoreline]

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!

[@GarronArgentina]

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.

[@CarlosAzaustre]

La costumbre

[@antonioespinozanegrete1292]

muy buen video!!!

[@JoseMartinez-mi4sd]

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

[@joseluisUnix]

Que software usa para crear sus videos, gracias

[@yohanavargas7983]

quiero crear una pagina web con base datos, seria mejor hacerlo por api o directo en el codigo?

[@fmancera]

No se mucho de programación web. Necesito contratarte para hacer una web con datos de apis de otras webs. Unas 10 aprox. Son unos 10 datos por cada web que hay que tomar. Podría contactarte por otro medio ?

[@dacunha121]

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.

[@lawrent6209]

Muy Buen video, Como se llama la fuente tipografica y el Tema que utilizas?

[@danielvera4317]

Hola excelente video, sera que puedas hacer videos mas explicativos sobre el manejo del DOM

[@CarlosAzaustre]

Lo tendré en cuenta. Un buen ejemplo es hacer un todolist, pero en JavaScript puro :)

[@battosaijurado]

cómo tienes el VSCODE configurado para el Intellisense? Me gusta lo bien que funciona

[@CarlosAzaustre]

Es en parte gracias al plugin Tabnine que comento en este otro vídeo kzbin.info/www/bejne/i3K6Z3ijh9SAgtU

[@pedro-jesuspastormunoz9792]

Muchas gracias Carlos. Sabes cómo consumir servicio soap con respuesta xml y definición por wsdl desde javascript? Muchas gracias por considerarlo!

[@CarlosAzaustre]

Ufff creo que en mis tiempos de universidad usé algo de eso, pero mi cabeza lo borró xD

[@Joseph_martinez_art]

exelente video :)

[@DestroidAdicted]

Que extensión utilizas en code para javascript

[@joelsotozegarra634]

gracias craaaack !

[@FernandoGonzalez-pv2zp]

Gracias hermano

[@HELMET10100]

Que tan seguro es consumir una api desde Javascript. He escuchado que desde navegador se puedo modificar?

[@Jyro77]

Pintar APIs usando Reactjs... Me encanta

[@carlosvalenciahenao4629]

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.

[@joaquinbalasini4367]

excelente!

[@sandraespinoza7710]

Muchisimas gracias!!!

[@CarlosAzaustre]

Muchas gracias a ti Sandra, por tu apoyo! :)

[@PabloR_23]

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

[@tt5583]

Estaría super que también lo hagas con react