¿Midu, puedes explicar cómo se consume una API Res?
Es verdad que la habías dicho, Leonardo.
Y claro que sí, con JavaScript.
Yo te lo explico.
Mira, vamos a utilizar Rapid API.
Vamos a utilizar Rapid API, ya que estamos.
Vamos a buscar alguna, no sé, por ejemplo.
Esto, para que no lo sepas, son un montón de APIs que hay disponibles.
Con Rapid API tienes un montón de APIs disponibles.
Y vamos a encontrar una donde podamos hacer llamadas.
Por ejemplo, vamos a hacer la Open Water Map.
A ver esta.
Bueno, esta está bien.
Se pueden hacer 500 al mes.
Suficientes.
Vamos a los endpoints, ¿vale?
Al final, la pregunta es, ¿cómo se hace una llamada a una API REST desde JavaScript?
Lo bueno que tienes con Rapid API es que tienes aquí, además, un montón de ejemplos.
Aquí tendrías el lenguaje JavaScript.
Podrías hacerla con jQuery, con fetch, XML, HTTP request o con Axios.
Y aquí podrías cambiar cada una.
Y aquí tendrías la solución.
Esto sería con fetch.
Esto sería, por ejemplo, JavaScript.
A ver si le damos.
JavaScript.
Axios, que sería una dependencia.
O la podrías hacer también con XML, HTTP request, que yo no te lo recomiendo.
Que es la API antigua cuando no existía la de fetch.
Y con jQuery tampoco te lo recomiendo.
Pero bueno, sin todo esto, vamos a hacerlo con fetch por nuestra parte, ¿vale?
En este caso, vamos a utilizar este endpoint de current weather data.
Esta sería la URL.
Entonces, esta sería la URL que le podemos pasar diferentes parámetros.
Vamos a run yes y vamos a enseñar el código aquí.
¿Cómo deberías hacer una llamada a una API REST?
Pues puedes utilizar fetch, ¿vale?
Fetch, que es parte de la fetch API, lo que te permite justamente es hacer peticiones a diferentes URLs con diferentes acciones.
Por defecto, la acción más común es GET, que si no indican ninguna, es la que vas a hacer.
La de GET, lo que vas a hacer simplemente es recuperar los datos.
Y GET se estás haciendo constantemente.
Cada vez que entras a una URL desde tu navegador, por ejemplo, vamos a mi página, ¿vale?
Si damos a inspeccionar y te vas a la red, cuando refrescamos, fíjate que la primera que ha hecho aquí, esta de aquí,
si aquí activamos que nos diga el método, el método que ha hecho es GET.
Y tienes GET, POST, DELETE, PATCH, OPTIONS, tienes un montón.
La de GET al final lo único que vas a hacer es recuperar datos y no vas a transformar, o sea, no vas a guardar datos por el otro lado.
No estás enviando tus datos, simplemente quieres recuperar datos.
Así que GET haces constantemente.
De hecho, aquí lo que queremos es un GET.
Así que le ponemos la URL a la que queremos hacer la petición.
En este caso, esta sería la URL a la que queremos hacer la petición.
Fíjate que no solo estamos pasando la URL, sino que le estamos pasando un query string, query params.
Le estamos diciendo, con la Q le estamos diciendo la ciudad a la que queremos buscar, el tiempo, la latitud, la longitud, el callback, que esto no es necesario, la ID, el idioma.
O sea, tú le puedes pasar diferentes datos a la URL para poder filtrar esa petición, darle información al servidor y así los datos que nos va a devolver son justamente los que necesitamos.
Vale, a la derecha ya podemos ver con el Fetch que nos está devolviendo una promesa y nos está diciendo que es pending.
Necesitamos resolver esta promesa.
Así que lo que podemos hacer es poner un punto DEN, como nos devuelve una promesa, podemos concatenar el método DEN y aquí tendríamos la respuesta.
Esta respuesta, vamos a hacer un console.log de la respuesta y vamos a ver qué nos está diciendo aquí, que no se ve qué tiene aquí.
No sé por qué, pero no se ve el resto.
Ah, sí, sí.
Vale, se está quejando de cost, de que no está autorizada, nos está dando un error 401.
Así que ya en la respuesta tenemos toda la información justamente de la respuesta.
Y en la respuesta nos está dando un 401.
No ha funcionado correctamente.
Normalmente, si la API fuese una API pública normal, por ejemplo, la PokeAPI, la PokeAPI, si vamos aquí, la PokeAPI es muy fácil que puedas acceder porque no tiene ningún tipo de seguridad.
Aquí puedes poner la URL de la PokeAPI y vamos a ver que esta sí que va a funcionar.
Voy a comentar esto y la vamos a hacer justo debajo, ¿vale?
Fetch.
Y aquí ahora hacemos el DEN, tenemos la respuesta y hacemos un console.log de la respuesta.
Si miramos aquí, aquí vemos que si tenemos un status 200, esto es que ha ido bien, nos dice...
Que ha ido ok, true.
Si aquí antes nos hubiera dado un false en el ok, ¿vale?
Y tenemos diferentes métodos.
Por ejemplo, tendríamos para recuperar los headers de la respuesta, el body, podríamos clonar la respuesta, verlo como un blob, podríamos ver el JSON texto.
El texto podríamos sacar el texto plano, pero a nosotros nos interesa, como nos ha devuelto un JSON, queremos transformar esta respuesta en un JSON.
Por lo tanto, vamos a hacer un res.json.
Y esto, si te fijas, no vuelve a devolver una promesa.
Así que tenemos que volver a concatenar otra promesa y aquí sí vamos a tener la respuesta en formato JSON.
Hacemos un console.log de la respuesta y ahora tenemos aquí la respuesta de la pokeapi en este caso.
Pero volvamos un poco al caso que teníamos anteriormente.
En el caso que teníamos aquí anteriormente, hemos visto que nos daba un 401.
Un 401 y que nos estaba diciendo que la respuesta no era ok, era false.
¿Qué podemos hacer para arreglar esto?
Bueno, en el caso de muchas APIs, hay algunas APIs que no son públicas y ya sea que necesitan una API key en el query string o ya sea que necesitan algunos headers especiales para indicarle al servidor que tenemos realmente acceso a esa API.
En este caso, aquí tenemos como las options.
Vamos a copiarnos estas options porque ahí es donde tenemos los headers que vamos a indicarle, vamos a pegarlo en la petición para que el servidor sepa que tenemos acceso.
Así que le decimos el method get.
Esto lo puedes quitar si quieres porque por defecto get, pero bueno, lo vamos a dejar para que quede claro.
Y en los headers vamos a tener dos, el de la key y el host.
Esto es en este caso que lo estamos utilizando así, pero podría ser de mil millones de maneras.
Hay algunos que lo pueden expor la query string aquí.
Hay otros que son con headers con otro nombre.
Esto es un ejemplo de una API que es protegida y a la que queremos hacer una petición.
¿Y cómo le pasaríamos la API?
Ahora, ¿qué hacemos con estos options?
Estos options hay que indicárselos al fetch.
Y aquí, como segundo parámetro, aquí le podemos pasar los options.
De hecho, aquí los teníamos también, los options.
Los pasamos como options, tenemos aquí la respuesta y ahora si miramos el proto, podemos ver que ahora sí me ha dado un 200.
Antes me daban 401 porque me estaba diciendo que la petición no era autorizada, como que no tenía permisos para hacer esa petición.
Pero ahora que le hemos pasado la API key y todo esto, ahora sí.
De forma que si hacemos otra vez un .den, tenemos aquí la respuesta, hacemos un console.log de la respuesta.
Y ahora sí, debería...
Bueno, ahora me ha dejado fatal porque...
Ah, perdón, perdón.
He hecho el console.log de este.
Y esto es res.json.
¿Ok?
Tenemos que transformar la respuesta.
Y esto devuelve otra promesa.
Y ahora...
Ah, pues no devuelve un .json.
Pensaba que devolvía esto un .json porque me dice syntax error...
Pues no sé qué devuelve.
Vamos a mirar con el texto.
A ver qué devuelve.
Ah, fíjate.
Pues devuelve esto.
Esto lo devuelve así en realidad por culpa de este callback.
Pero bueno, esto es una cosa más de este endpoint que no de otra cosa.
¿Vale?
Ves, ahora ha estado devolviendo con formato .xml.
Hay diferentes formas de que lo devuelva.
Ah, mira.
Es que tiene un modo aquí.
Pero ves que tiene aquí un query string que es modo.
Pues si le ponemos aquí .json, ahora sí lo va a hacer como .json.
Y ahora sí podríamos hacer .json.
Y ahora sí lo tendríamos como formato .json en .javascript.
Pero bueno, está bastante bien que haya fallado.
Más que nada para que veas los diferentes query strings, como sí que cambian,
lo pueden cambiar dependiendo el servidor.
Si este endpoint acepta este parámetro, puede cambiar el tipo de la respuesta.
Has visto también cómo hacerle un fetch a un endpoint que esté securizado.
Y has visto también uno publico como el de la PokeApi, que es totalmente abierto
y sin necesidad de pasarle los headers, funciona.
Esas serían todas las formas.
Bueno, todas las formas.
Una de las formas de hacer con fetch llamadas a una API, a una API Red, justamente.
Un cells inmediata y aika Spring 5.javascript.