subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/07-Peticiones HTTP en JavaScript Fetch GET POST y DELETE.vtt

WEBVTT

00:00.000 --> 00:05.560
Veamos entonces cómo podemos hacer una
petición y empezar a interactuar con lo

00:05.560 --> 00:09.100
que nos trae esa petición. Vamos a venir aquí,
vamos a hacer un poco

00:09.100 --> 00:17.060
más chico nuestro editor. Venimos a
nuestro navegador. Ok. Aquí tienes el HTML.

00:17.060 --> 00:23.620
Vamos a cerrarlo y venimos aquí a nuestro
JavaScript. Con nuestro JavaScript, lo

00:23.620 --> 00:27.540
primero que queremos hacer es, ya que
tenemos una petición, acabamos de hacer

00:27.540 --> 00:32.980
un fetch, vamos a ver de qué forma podemos
escalar más. Si vamos a estar

00:32.980 --> 00:38.980
haciendo diferentes peticiones como un GET,
tipo un GET, tipo un POST, tipo un DELETE,

00:38.980 --> 00:43.340
de qué forma podemos ir escalando cada una
de estas peticiones. Lo que yo haría

00:43.340 --> 00:49.500
sería empezaríamos con una función que se
va a llamar,

00:49.500 --> 01:01.460
por ejemplo, sendHttpRequest. Y esta va a
ser la función que mandaríamos llamar

01:01.460 --> 01:06.540
para poder hacer las peticiones. Esta
función va a llevar

01:06.540 --> 01:12.020
tres parámetros. El primer parámetro va a
ser el método, el método que se va a

01:12.020 --> 01:17.500
utilizar. El segundo parámetro va a ser la
URL, con la cual le vamos a hacer como

01:17.500 --> 01:24.660
esa petición. Y el tercer parámetro va a
ser el tipo de dato que vamos a enviar.

01:24.900 --> 01:31.660
Perfecto. Entonces, ahora con esto, lo que
vamos a hacer es, vamos a poner

01:31.660 --> 01:39.900
return y vamos a generar un fetch. Y el
fetch va a llevar de inicio

01:39.900 --> 01:44.540
la URL que le vamos a pasar, que va a ser
el parámetro cuando mandemos llamar

01:44.540 --> 01:49.980
nuestra función, a qué URL le vamos a
hacer el fetch.

01:49.980 --> 01:54.300
Y aquí vamos a estructurar de forma
distinta

01:54.300 --> 01:58.740
qué es lo que vamos a utilizar para el fetch.
Vamos a poner

01:58.740 --> 02:04.260
ahora el tipo de método que vamos a utilizar.
Y esto va a ser

02:04.260 --> 02:12.020
igual a el método. Bien, ahora la
estructura del request

02:12.020 --> 02:17.780
trae un body y trae un header. En el body,
por ejemplo, cuando nosotros

02:17.780 --> 02:21.740
hacemos un post, tenemos que enviar la
información que estamos enviando

02:21.740 --> 02:28.980
directamente al servidor. Esto iría en el
body del request. Y la forma de enviar

02:28.980 --> 02:33.020
es un JSON
punto

02:33.900 --> 02:39.420
stringify
data.

02:39.420 --> 02:45.740
Que lo que hace el stringify es convierte
el objeto de yes en JSON.

02:45.740 --> 02:51.980
Y ahora el tipo de header, que son los
headers del request, que es lo que vamos

02:51.980 --> 02:57.140
a estar enviando. Y aquí en la parte de
los headers, hay cierta información que

02:57.140 --> 03:01.500
se está guardando. Pero de inicio, la
información que yo le voy a decir

03:01.500 --> 03:08.500
que vamos a enviar, es vamos a enviar un JSON,
un tipo de contenido en

03:08.500 --> 03:13.500
JSON, para que se sepa cómo tratar el
contenido o la data que vamos a enviar

03:13.500 --> 03:18.060
nosotros. Y eso se hace de esta forma.

03:18.220 --> 03:22.220
Content
type.

03:22.300 --> 03:30.540
Y aquí le decimos que es un application
slash JSON.

03:30.540 --> 03:34.540
Perfecto. Entonces aquí estamos enviando
la

03:34.540 --> 03:39.660
url, que nos van a pasar como parámetro
una vez que pongamos la función. Y aquí

03:39.660 --> 03:44.540
le estamos enviando todos los metadatos
que requiere ser request. El tipo de

03:44.540 --> 03:49.460
método, lo que viene en el body, si aplica
y cuáles van a ser los headers

03:49.460 --> 03:54.020
que vamos a estar enviando. Súper bien.
Ya que tenemos eso,

03:54.020 --> 03:57.380
ahora vamos a enviar, como estamos
utilizando un fetch, y esto es una

03:57.380 --> 04:03.540
promesa, vamos a utilizar el den, para que
el den nos regrese la respuesta.

04:03.540 --> 04:07.740
Porque lo que estamos haciendo aquí es
enviando el request y queremos que nos

04:07.740 --> 04:11.820
regrese una respuesta, para que cuando
utilicemos esta función, tengamos los

04:11.820 --> 04:20.420
datos de esa respuesta. Entonces aquí sea
response, y eso va a ser igual a,

04:20.500 --> 04:27.620
queremos que, return, que nos regrese la
respuesta.

04:28.300 --> 04:33.380
Para que entonces ya con esto, nosotros
podamos hacer algo. Ok, Zoom, ya que

04:33.380 --> 04:37.100
tenemos esta respuesta, podemos empezar a
trabajarla en la parte de front, para

04:37.100 --> 04:42.380
inyectarla en nuestro HTML. Bien, vamos a
guardar.

04:42.380 --> 04:47.540
Y ahora, ya que estamos aquí, ya que
tenemos la estructura de cómo vamos a

04:47.540 --> 04:52.700
estar haciendo las las los request de HTTP,
vamos a empezar entonces con el

04:52.700 --> 04:58.740
request, que va a darle interacción a este
botón. Este botón lo que va a hacer

04:58.740 --> 05:03.940
es, al momento de dar un getContent,
lo que yo esperaría es que se genere ese

05:03.940 --> 05:08.220
request en el servidor y me traiga la
información, que es lo que estuvimos

05:08.220 --> 05:12.420
viendo. Al estar utilizando un fetch,
podemos imprimir en la consola como una

05:12.420 --> 05:18.060
respuesta. Entonces vamos acá, y vamos a
generar otra función,

05:18.380 --> 05:26.700
que se va a llamar fetchPost. Lo que
queremos es que nos traiga, como los

05:26.700 --> 05:32.500
post que utilizamos en nuestra URL. Esta
función no va a llevar ningún tipo de

05:32.500 --> 05:36.460
parámetro, porque toda la lógica va a
estar acá adentro. Y vamos a utilizar una

05:36.460 --> 05:44.460
función async, para no estar bloqueando
las cargas que tenemos en el navegador y

05:44.460 --> 05:47.700
dar una buena experiencia con relación al
tiempo de carga que tenga nuestra

05:47.700 --> 05:52.220
aplicación. Entonces estamos aquí, lo que
vamos a hacer ahora es generar una

05:52.220 --> 06:03.780
constante que se va a llamar responseData,
que va a ser igual a await

06:03.780 --> 06:08.100
de esta función. Aquí es donde vamos a
hacer nosotros como el fetch,

06:08.100 --> 06:14.020
prácticamente. Entonces para eso le
ponemos sendHttpRequest, como si

06:14.020 --> 06:20.260
hiciéramos un fetch, pero este es como
nuestro fetch. Y aquí vamos a ponerle el

06:20.260 --> 06:26.900
tipo de método. Queremos que hagas un get,

06:26.900 --> 06:32.620
que como te comento, fetch por default
siempre va a ser un get, pero como aquí

06:32.620 --> 06:37.820
estamos haciendo una función que vamos a
reutilizar, vamos a ser específicos en

06:37.820 --> 06:41.420
lo que estamos buscando. Entonces queremos
que hagas un fetch, y queremos que el

06:41.420 --> 06:47.100
fetch lo hagas a la URL de que estábamos
utilizando, para poder traer los

06:47.100 --> 06:53.980
diferentes posts. Le damos un coma y vamos
a pegar esta URL.

06:53.980 --> 06:58.220
Y la URL tiene que ir con
comillas.

06:58.380 --> 07:02.380
Perfecto. Entonces de esta función, como
estamos haciendo nosotros un get, le

07:02.380 --> 07:07.340
estamos diciendo, queremos que hagas un
get a esta URL, haz el fetch y me

07:07.340 --> 07:12.740
regresas la respuesta. Super bien.
Entonces ya con eso, lo que yo esperaría

07:12.740 --> 07:20.260
que pasar aquí es un
console.log

07:20.260 --> 07:24.460
y quiero que me imprima esta respuesta.
Quiero que me imprima lo que nos va a

07:24.460 --> 07:30.540
regresar nuestra función de fetch.
Entonces si guardamos, solucionamos

07:30.540 --> 07:35.060
teType o antes de que nos quede el problema,
json,

07:35.060 --> 07:40.020
y venimos aquí a nuestro navegador, vamos
a nuestra consola, y lo que

07:40.020 --> 07:45.220
tenemos que hacer ahora es nada más mandar
llamar nuestra función, que se va

07:45.220 --> 07:51.900
a encargar de generar el request. Perfecto.
Nos dice que es una promesa y

07:51.900 --> 07:57.220
nos dice aquí, más bien ya nos trae la
respuesta. Por esta parte, ok, vamos

07:57.220 --> 08:01.100
directamente a nuestro network, que es
donde me interesa, porque estamos

08:01.100 --> 08:06.300
haciendo uso
de...

08:06.300 --> 08:11.780
Entonces aquí podemos ver que se hizo
nuestro request de fetch. Estamos en un

08:11.780 --> 08:18.140
status 200 a la URL. Entonces abrimos el post.
Este es el preview de lo que nos

08:18.140 --> 08:23.900
regresa. Cuando estemos trabajando con
request en APIs, esta es la pantalla

08:23.900 --> 08:27.260
donde tenemos que pasar nuestro mayor tiempo.
Por aquí es donde realmente

08:27.260 --> 08:30.900
podemos ver qué es lo que está pasando.
Si las cosas no funcionan, si las cosas

08:30.900 --> 08:34.580
funcionan, si el request de ahora no está
funcionando de la forma esperada, aquí vamos a saber

08:34.580 --> 08:40.100
qué es lo que está pasando. Entonces, listo,
con esto ya tenemos la

08:40.100 --> 08:47.140
información. Bien, si venimos acá, ¿qué es
el siguiente paso?

08:47.140 --> 08:51.300
El siguiente paso sería tomar esta respuesta.
Como podemos ver, esta respuesta

08:51.300 --> 08:56.060
nos regresa un arreglo de diferentes
objetos y de aquí tenemos que extraer

08:56.060 --> 09:00.380
la información para poder imprimir el título,
para poder imprimir el contenido.

09:00.380 --> 09:05.620
Nos trae por ejemplo el título y el body
del post y nos trae un ID. Esto es lo que

09:05.620 --> 09:10.100
nosotros queremos imprimir e inyectar
directamente en nuestro HTML con

09:10.100 --> 09:15.660
JavaScript. Entonces lo que yo tendría que
hacer ahorita sería, de inicio,

09:15.660 --> 09:21.660
podría generar una nueva constante para
mantener limpia la respuesta que me trae

09:21.660 --> 09:25.660
el navegador o más bien el servidor.
Podría generar una nueva constante que se llama

09:25.660 --> 09:33.620
list of posts, para ser mucho más claro,
que sea igual a esta respuesta. Y así yo

09:33.620 --> 09:40.060
no modifico esta variable. Y ahora con eso,
lo primero que yo tendría que hacer

09:40.060 --> 09:47.300
es, como me está llegando a mí un objeto,
me está llegando... vamos acá...

09:47.300 --> 09:51.300
para poderlo ver... cierro un poquito aquí...

09:51.300 --> 09:57.380
ok, aquí me está llegando un arreglo.
Si yo pongo console y mando a llamar otra

09:57.380 --> 10:03.420
vez mi función, me está llegando un
arreglo de diferentes objetos y lo que

10:03.420 --> 10:09.220
yo quiero hacer es imprimir cada uno de
estos objetos

10:09.220 --> 10:15.460
en mi HTTP. La forma de hacerlo es, tengo
que iterar, tengo que

10:15.460 --> 10:19.580
iterar este arreglo, para que entonces por
cada uno de los objetos de ese

10:19.580 --> 10:24.780
arreglo, yo pueda empezar a extraer la
información e inyectarla en el HTML.

10:24.780 --> 10:29.740
Entonces, yo ya tengo como cierto código
listo. Lo que voy a hacer es

10:29.740 --> 10:33.900
copiar y pegar y te lo voy a explicar en
este momento.

10:33.900 --> 10:38.380
Entonces aquí yo voy a copiar este código.
Este código lo estoy copiando

10:38.380 --> 10:43.580
porque esto es algo que tú ya sabes hacer.
Si tienes dudas con parte de este

10:43.580 --> 10:47.060
código, te recomiendo que puedas reforzar
tus conocimientos en el tema de

10:47.060 --> 10:51.020
manipulación del DOM, en la parte de crear
y manipular elementos con

10:51.020 --> 10:56.020
JavaScript. Pero vamos a ver aquí entonces
qué estamos haciendo. Estamos generando

10:56.020 --> 11:03.980
un for-off para poder iterar sobre el
arreglo de objetos que nos trae.

11:03.980 --> 11:08.540
Entonces lo que le estamos pidiendo es que
por cada post que venga en la lista de post,

11:08.540 --> 11:14.980
lo que tienes que hacer es lo siguiente.
Ahora, post container, aquí estamos

11:14.980 --> 11:19.940
generando un nuevo elemento con
createElement que se

11:19.940 --> 11:26.780
llama un article. A este nuevo elemento le
estamos generando un ID y una clase

11:26.780 --> 11:31.260
para que pueda hacer match con el CSS que
tenemos. De igual forma estamos

11:31.260 --> 11:36.100
generando un título y le estamos poniendo
el título con el contenido de

11:36.100 --> 11:43.020
texto que viene en el post, en el title.
Si venimos aquí a nuestro request

11:43.020 --> 11:46.860
y lo mandamos llamar con nuestra función,

11:46.860 --> 11:52.940
podemos ver un poco la estructura que nos
trae. Dentro de la estructura si viene el

11:52.940 --> 11:57.900
título, viene el título y el cuerpo.
Entonces también aquí estamos generando

11:57.900 --> 12:03.060
por ejemplo el body que va a ser
referencia a esta parte y estamos aquí

12:03.060 --> 12:08.020
poniéndole el contenido de texto con el
punto body que viene en este objeto.

12:08.020 --> 12:13.580
Estamos generando un botón y este botón va
a tener el texto de borrar, borrar

12:13.580 --> 12:18.020
contenido y aquí nada más estamos haciendo
un append y el append lo estamos

12:18.020 --> 12:23.660
haciendo a el listElement que eso hace
referencia a un contenedor que viene en

12:23.660 --> 12:30.900
nuestro HTML. Ahora lo que tenemos que
hacer es, tenemos que con JavaScript y

12:30.900 --> 12:33.860
eso lo voy a poner aquí
arriba.

12:33.860 --> 12:39.500
Perfecto, entonces aquí estamos generando
las variables de cada uno de

12:39.500 --> 12:43.100
nuestros elementos y con JavaScript los
estamos seleccionando para poderlos

12:43.100 --> 12:48.460
guardar. Entonces aquí teníamos el
listElement que le estamos haciendo

12:48.460 --> 12:53.700
referencia aquí y estamos pidiendo que
esto que acabamos de generar lo pueda

12:53.700 --> 13:00.620
inyectar en un append a listElement.
Todo esto es parte de, por ejemplo aquí el

13:00.620 --> 13:05.380
body y el title lo estamos poniendo
prácticamente en el post container que

13:05.380 --> 13:09.580
es como el contenedor de una tarjeta y esa
tarjeta completa la estamos

13:09.580 --> 13:16.660
agregando a nuestra como lista de
elementos que si abrimos nuestro HTML

13:16.660 --> 13:20.420
va a ser el contenedor donde se van a guardar.
Super bien, entonces vamos a

13:20.420 --> 13:26.980
guardar esto, ¿qué nos faltaría? Nos falta
poder como imprimir, al momento de que yo

13:26.980 --> 13:31.860
haga clic en este botón, lo que yo quiero
que haga es que este botón haga el

13:31.860 --> 13:37.380
request get y cuando me traiga esa
información aparezca visualmente acá.

13:37.380 --> 13:42.260
Entonces lo que tenemos que hacer es
tenemos que generar esa interacción con

13:42.260 --> 13:48.340
JavaScript, tenemos que ponerle ese evento
a ese botón. Entonces ya tenemos aquí el

13:48.340 --> 13:57.940
botón se llama fetchButton, vamos a
ponerlo acá, fetchButton.asksHeavenListener

13:57.940 --> 14:03.300
y queremos que esto suceda con un clic.

14:04.060 --> 14:09.620
Perfecto y una vez que suceda el clic que
manda a llamar nuestra función de

14:09.620 --> 14:13.580
fetchPost.

14:13.580 --> 14:20.580
Con esto guardamos y si todo funciona al
momento de darle getContent

14:20.580 --> 14:24.580
podemos ver cómo automáticamente se
empiezan a cargar cada uno de nuestros

14:24.580 --> 14:44.580
posts.