Veamos entonces cómo podemos hacer una petición y empezar a interactuar con lo
que nos trae esa petición. Vamos a venir aquí, vamos a hacer un poco
más chico nuestro editor. Venimos a nuestro navegador. Ok. Aquí tienes el HTML.
Vamos a cerrarlo y venimos aquí a nuestro JavaScript. Con nuestro JavaScript, lo
primero que queremos hacer es, ya que tenemos una petición, acabamos de hacer
un fetch, vamos a ver de qué forma podemos escalar más. Si vamos a estar
haciendo diferentes peticiones como un GET, tipo un GET, tipo un POST, tipo un DELETE,
de qué forma podemos ir escalando cada una de estas peticiones. Lo que yo haría
sería empezaríamos con una función que se va a llamar,
por ejemplo, sendHttpRequest. Y esta va a ser la función que mandaríamos llamar
para poder hacer las peticiones. Esta función va a llevar
tres parámetros. El primer parámetro va a ser el método, el método que se va a
utilizar. El segundo parámetro va a ser la URL, con la cual le vamos a hacer como
esa petición. Y el tercer parámetro va a ser el tipo de dato que vamos a enviar.
Perfecto. Entonces, ahora con esto, lo que vamos a hacer es, vamos a poner
return y vamos a generar un fetch. Y el fetch va a llevar de inicio
la URL que le vamos a pasar, que va a ser el parámetro cuando mandemos llamar
nuestra función, a qué URL le vamos a hacer el fetch.
Y aquí vamos a estructurar de forma distinta
qué es lo que vamos a utilizar para el fetch. Vamos a poner
ahora el tipo de método que vamos a utilizar. Y esto va a ser
igual a el método. Bien, ahora la estructura del request
trae un body y trae un header. En el body, por ejemplo, cuando nosotros
hacemos un post, tenemos que enviar la información que estamos enviando
directamente al servidor. Esto iría en el body del request. Y la forma de enviar
es un JSON punto
stringify data.
Que lo que hace el stringify es convierte el objeto de yes en JSON.
Y ahora el tipo de header, que son los headers del request, que es lo que vamos
a estar enviando. Y aquí en la parte de los headers, hay cierta información que
se está guardando. Pero de inicio, la información que yo le voy a decir
que vamos a enviar, es vamos a enviar un JSON, un tipo de contenido en
JSON, para que se sepa cómo tratar el contenido o la data que vamos a enviar
nosotros. Y eso se hace de esta forma.
Content type.
Y aquí le decimos que es un application slash JSON.
Perfecto. Entonces aquí estamos enviando la
url, que nos van a pasar como parámetro una vez que pongamos la función. Y aquí
le estamos enviando todos los metadatos que requiere ser request. El tipo de
método, lo que viene en el body, si aplica y cuáles van a ser los headers
que vamos a estar enviando. Súper bien. Ya que tenemos eso,
ahora vamos a enviar, como estamos utilizando un fetch, y esto es una
promesa, vamos a utilizar el den, para que el den nos regrese la respuesta.
Porque lo que estamos haciendo aquí es enviando el request y queremos que nos
regrese una respuesta, para que cuando utilicemos esta función, tengamos los
datos de esa respuesta. Entonces aquí sea response, y eso va a ser igual a,
queremos que, return, que nos regrese la respuesta.
Para que entonces ya con esto, nosotros podamos hacer algo. Ok, Zoom, ya que
tenemos esta respuesta, podemos empezar a trabajarla en la parte de front, para
inyectarla en nuestro HTML. Bien, vamos a guardar.
Y ahora, ya que estamos aquí, ya que tenemos la estructura de cómo vamos a
estar haciendo las las los request de HTTP, vamos a empezar entonces con el
request, que va a darle interacción a este botón. Este botón lo que va a hacer
es, al momento de dar un getContent, lo que yo esperaría es que se genere ese
request en el servidor y me traiga la información, que es lo que estuvimos
viendo. Al estar utilizando un fetch, podemos imprimir en la consola como una
respuesta. Entonces vamos acá, y vamos a generar otra función,
que se va a llamar fetchPost. Lo que queremos es que nos traiga, como los
post que utilizamos en nuestra URL. Esta función no va a llevar ningún tipo de
parámetro, porque toda la lógica va a estar acá adentro. Y vamos a utilizar una
función async, para no estar bloqueando las cargas que tenemos en el navegador y
dar una buena experiencia con relación al tiempo de carga que tenga nuestra
aplicación. Entonces estamos aquí, lo que vamos a hacer ahora es generar una
constante que se va a llamar responseData, que va a ser igual a await
de esta función. Aquí es donde vamos a hacer nosotros como el fetch,
prácticamente. Entonces para eso le ponemos sendHttpRequest, como si
hiciéramos un fetch, pero este es como nuestro fetch. Y aquí vamos a ponerle el
tipo de método. Queremos que hagas un get,
que como te comento, fetch por default siempre va a ser un get, pero como aquí
estamos haciendo una función que vamos a reutilizar, vamos a ser específicos en
lo que estamos buscando. Entonces queremos que hagas un fetch, y queremos que el
fetch lo hagas a la URL de que estábamos utilizando, para poder traer los
diferentes posts. Le damos un coma y vamos a pegar esta URL.
Y la URL tiene que ir con comillas.
Perfecto. Entonces de esta función, como estamos haciendo nosotros un get, le
estamos diciendo, queremos que hagas un get a esta URL, haz el fetch y me
regresas la respuesta. Super bien. Entonces ya con eso, lo que yo esperaría
que pasar aquí es un console.log
y quiero que me imprima esta respuesta. Quiero que me imprima lo que nos va a
regresar nuestra función de fetch. Entonces si guardamos, solucionamos
teType o antes de que nos quede el problema, json,
y venimos aquí a nuestro navegador, vamos a nuestra consola, y lo que
tenemos que hacer ahora es nada más mandar llamar nuestra función, que se va
a encargar de generar el request. Perfecto. Nos dice que es una promesa y
nos dice aquí, más bien ya nos trae la respuesta. Por esta parte, ok, vamos
directamente a nuestro network, que es donde me interesa, porque estamos
haciendo uso de...
Entonces aquí podemos ver que se hizo nuestro request de fetch. Estamos en un
status 200 a la URL. Entonces abrimos el post. Este es el preview de lo que nos
regresa. Cuando estemos trabajando con request en APIs, esta es la pantalla
donde tenemos que pasar nuestro mayor tiempo. Por aquí es donde realmente
podemos ver qué es lo que está pasando. Si las cosas no funcionan, si las cosas
funcionan, si el request de ahora no está funcionando de la forma esperada, aquí vamos a saber
qué es lo que está pasando. Entonces, listo, con esto ya tenemos la
información. Bien, si venimos acá, ¿qué es el siguiente paso?
El siguiente paso sería tomar esta respuesta. Como podemos ver, esta respuesta
nos regresa un arreglo de diferentes objetos y de aquí tenemos que extraer
la información para poder imprimir el título, para poder imprimir el contenido.
Nos trae por ejemplo el título y el body del post y nos trae un ID. Esto es lo que
nosotros queremos imprimir e inyectar directamente en nuestro HTML con
JavaScript. Entonces lo que yo tendría que hacer ahorita sería, de inicio,
podría generar una nueva constante para mantener limpia la respuesta que me trae
el navegador o más bien el servidor. Podría generar una nueva constante que se llama
list of posts, para ser mucho más claro, que sea igual a esta respuesta. Y así yo
no modifico esta variable. Y ahora con eso, lo primero que yo tendría que hacer
es, como me está llegando a mí un objeto, me está llegando... vamos acá...
para poderlo ver... cierro un poquito aquí...
ok, aquí me está llegando un arreglo. Si yo pongo console y mando a llamar otra
vez mi función, me está llegando un arreglo de diferentes objetos y lo que
yo quiero hacer es imprimir cada uno de estos objetos
en mi HTTP. La forma de hacerlo es, tengo que iterar, tengo que
iterar este arreglo, para que entonces por cada uno de los objetos de ese
arreglo, yo pueda empezar a extraer la información e inyectarla en el HTML.
Entonces, yo ya tengo como cierto código listo. Lo que voy a hacer es
copiar y pegar y te lo voy a explicar en este momento.
Entonces aquí yo voy a copiar este código. Este código lo estoy copiando
porque esto es algo que tú ya sabes hacer. Si tienes dudas con parte de este
código, te recomiendo que puedas reforzar tus conocimientos en el tema de
manipulación del DOM, en la parte de crear y manipular elementos con
JavaScript. Pero vamos a ver aquí entonces qué estamos haciendo. Estamos generando
un for-off para poder iterar sobre el arreglo de objetos que nos trae.
Entonces lo que le estamos pidiendo es que por cada post que venga en la lista de post,
lo que tienes que hacer es lo siguiente. Ahora, post container, aquí estamos
generando un nuevo elemento con createElement que se
llama un article. A este nuevo elemento le estamos generando un ID y una clase
para que pueda hacer match con el CSS que tenemos. De igual forma estamos
generando un título y le estamos poniendo el título con el contenido de
texto que viene en el post, en el title. Si venimos aquí a nuestro request
y lo mandamos llamar con nuestra función,
podemos ver un poco la estructura que nos trae. Dentro de la estructura si viene el
título, viene el título y el cuerpo. Entonces también aquí estamos generando
por ejemplo el body que va a ser referencia a esta parte y estamos aquí
poniéndole el contenido de texto con el punto body que viene en este objeto.
Estamos generando un botón y este botón va a tener el texto de borrar, borrar
contenido y aquí nada más estamos haciendo un append y el append lo estamos
haciendo a el listElement que eso hace referencia a un contenedor que viene en
nuestro HTML. Ahora lo que tenemos que hacer es, tenemos que con JavaScript y
eso lo voy a poner aquí arriba.
Perfecto, entonces aquí estamos generando las variables de cada uno de
nuestros elementos y con JavaScript los estamos seleccionando para poderlos
guardar. Entonces aquí teníamos el listElement que le estamos haciendo
referencia aquí y estamos pidiendo que esto que acabamos de generar lo pueda
inyectar en un append a listElement. Todo esto es parte de, por ejemplo aquí el
body y el title lo estamos poniendo prácticamente en el post container que
es como el contenedor de una tarjeta y esa tarjeta completa la estamos
agregando a nuestra como lista de elementos que si abrimos nuestro HTML
va a ser el contenedor donde se van a guardar. Super bien, entonces vamos a
guardar esto, ¿qué nos faltaría? Nos falta poder como imprimir, al momento de que yo
haga clic en este botón, lo que yo quiero que haga es que este botón haga el
request get y cuando me traiga esa información aparezca visualmente acá.
Entonces lo que tenemos que hacer es tenemos que generar esa interacción con
JavaScript, tenemos que ponerle ese evento a ese botón. Entonces ya tenemos aquí el
botón se llama fetchButton, vamos a ponerlo acá, fetchButton.asksHeavenListener
y queremos que esto suceda con un clic.
Perfecto y una vez que suceda el clic que manda a llamar nuestra función de
fetchPost.
Con esto guardamos y si todo funciona al momento de darle getContent
podemos ver cómo automáticamente se empiezan a cargar cada uno de nuestros
posts.