subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/08-Envío de Datos al Servidor con JavaScript y Fetch API.vtt

WEBVTT

00:00.000 --> 00:02.000
Ya tenemos aquí nuestros
posts.

00:02.000 --> 00:04.000
Ahora, lo que queremos hacer nosotros,

00:04.000 --> 00:08.000
es al momento de que yo pueda llenar aquí
un título,

00:08.000 --> 00:11.000
y algo de
contenido,

00:11.000 --> 00:14.000
y pongamos post
content,

00:14.000 --> 00:16.000
esto tendría que enviar un
post,

00:16.000 --> 00:19.000
que en HTTP, los verbos de
HTTP,

00:19.000 --> 00:22.000
esto es poder enviar información
directamente al servidor,

00:22.000 --> 00:24.000
y que esta información que yo estoy
llenando aquí,

00:24.000 --> 00:26.000
realmente se
envíe.

00:26.000 --> 00:28.000
De inicio tenemos que evitar que este
comportamiento,

00:28.000 --> 00:30.000
de que se refresca la
página,

00:30.000 --> 00:32.000
cada que le doy clic,
suceda.

00:32.000 --> 00:34.000
Vamos a ir con
JavaScript.

00:34.000 --> 00:36.000
Pero también tenemos que tomar la
información de acá,

00:36.000 --> 00:39.000
guardarla, y enviarla en el request.

00:39.000 --> 00:41.000
Para que podamos ver
aquí,

00:41.000 --> 00:45.000
una vez que apretemos este botón de post
content,

00:45.000 --> 00:48.000
podamos ver como se hizo una petición más,

00:48.000 --> 00:51.000
podamos ver que esa petición está pasando
en post,

00:51.000 --> 00:53.000
y que es lo que se está
enviando.

00:53.000 --> 00:55.000
Así que, vamos para
allá.

00:55.000 --> 00:57.000
Estamos aquí en nuestro
JavaScript,

00:57.000 --> 01:00.000
y vamos a empezar con otra
función,

01:00.000 --> 01:04.000
que se va a llamar
createPost.

01:04.000 --> 01:06.000
Y va a tener dos
parámetros,

01:06.000 --> 01:08.000
que es el
título,

01:08.000 --> 01:11.000
y el
content.

01:11.000 --> 01:13.000
Perfecto.

01:13.000 --> 01:16.000
Estando aquí, vamos a
examinar,

01:16.000 --> 01:20.000
un poco la
estructura,

01:20.000 --> 01:23.000
de los posts que se están
enviando.

01:23.000 --> 01:25.000
Si vemos aquí el
response,

01:25.000 --> 01:27.000
que tiene que enviar el
título,

01:27.000 --> 01:29.000
vemos que tiene que enviar el cuerpo,

01:29.000 --> 01:32.000
que será el título, y el contenido va a
ser el cuerpo.

01:32.000 --> 01:35.000
Pero vemos aquí que viene un ID, y un User ID.

01:35.000 --> 01:38.000
Nosotros tendríamos que enviar un User ID,

01:38.000 --> 01:41.000
para poder hacer match un poco con la
estructura.

01:41.000 --> 01:43.000
Pudiéramos enviar el
ID,

01:43.000 --> 01:46.000
pero de inicio, con que nosotros creemos
un User ID,

01:46.000 --> 01:49.000
va a ser importante, para poderlo enviar,

01:49.000 --> 01:51.000
y que no rompa la
estructura,

01:51.000 --> 01:54.000
de lo que estaría esperando el servidor de
esta API.

01:54.000 --> 01:56.000
Para poder hacer
eso,

01:56.000 --> 01:59.000
nosotros no vamos a poder generar un
número distinto,

01:59.000 --> 02:02.000
por cada uno de los posts que se vaya
generando.

02:02.000 --> 02:06.000
Así que, voy a, de manera
rápida,

02:06.000 --> 02:10.000
generar una constante que se llame User ID,

02:10.000 --> 02:14.000
que va a ser igual a un match random,

02:14.000 --> 02:18.000
que me vaya a generar un número de manera
aleatoria,

02:18.000 --> 02:21.000
que se va a convertir en este User ID.

02:21.000 --> 02:23.000
Ya lo tenemos acá.
Perfecto.

02:23.000 --> 02:26.000
Entonces, aquí tenemos que hacer esa
pequeña estructura,

02:26.000 --> 02:28.000
ese pequeño objeto que vamos a enviar,

02:28.000 --> 02:30.000
y se va a llamar
post.

02:30.000 --> 02:32.000
Este es el post que vamos a estar enviando.

02:32.000 --> 02:34.000
El post va a tener un
title,

02:34.000 --> 02:36.000
que va a ser igual al
title,

02:36.000 --> 02:41.000
que va a venir prácticamente de lo que
obtengamos

02:41.000 --> 02:44.000
de nuestro input, pero se va a inyectar aquí,

02:44.000 --> 02:46.000
en nuestra
función.

02:46.000 --> 02:48.000
Vamos a tener un
body,

02:48.000 --> 02:52.000
que va a ser referencia al
content,

02:52.000 --> 02:56.000
que estamos nosotros utilizando aquí en
nuestra función,

02:56.000 --> 02:59.000
como parámetro, y el User
ID,

02:59.000 --> 03:02.000
que se está generando de manera aleatoria,

03:02.000 --> 03:04.000
con un match
random.

03:04.000 --> 03:06.000
User ID.
Perfecto.

03:06.000 --> 03:08.000
Entonces, teniendo
eso,

03:08.000 --> 03:10.000
tenemos la pequeña
estructura

03:10.000 --> 03:13.000
de lo que se va a enviar al servidor.

03:13.000 --> 03:15.000
¿Qué nos
falta?

03:15.000 --> 03:18.000
Esta función vamos a hacerla
async.

03:18.000 --> 03:20.000
Muy
bien.

03:20.000 --> 03:22.000
Entonces, ahora,
aquí,

03:22.000 --> 03:24.000
tenemos que hacer ese
request.

03:24.000 --> 03:26.000
Y para poder hacer ese
request,

03:26.000 --> 03:29.000
vamos a mandar llamar nuestra
función

03:31.000 --> 03:34.000
para que se genere el
fetch.

03:35.000 --> 03:38.000
Entonces, aquí, ponemos esta función.

03:38.000 --> 03:43.000
El método, aquí le vamos a pedir que ahora
sea un post.

03:43.000 --> 03:47.000
Ese va a ser el método que vamos a estar
utilizando.

03:47.000 --> 03:50.000
La URL va a ser la misma
URL

03:50.000 --> 03:53.000
que estamos utilizando para ese ejercicio.

03:53.000 --> 03:56.000
Entonces, vamos a utilizar esta misma
URL

03:56.000 --> 03:59.000
para que pueda enviar un
post.

03:59.000 --> 04:02.000
Entonces, aquí ponemos, y tenemos la misma
URL.

04:02.000 --> 04:04.000
Y los datos que vamos a
enviar,

04:04.000 --> 04:07.000
porque en este caso, como estamos enviando
un post,

04:07.000 --> 04:09.000
sí tiene que ir un
body,

04:09.000 --> 04:12.000
porque el body habla de la información que
estamos enviando.

04:12.000 --> 04:14.000
En este caso, va a ser
post.

04:14.000 --> 04:17.000
Esta es la información que nosotros vamos
a enviar.

04:18.000 --> 04:19.000
Perfecto.

04:19.000 --> 04:21.000
Entonces, con esto ya tenemos la
estructura

04:21.000 --> 04:24.000
de la función que va a estar enviando el
request

04:24.000 --> 04:28.000
con la información para poder generar un
nuevo blog post.

04:28.000 --> 04:29.000
¿Qué nos
faltaría?

04:29.000 --> 04:34.000
Nos falta ahora generar el evento en este
botón.

04:34.000 --> 04:38.000
Entonces, este botón se llama, vamos a
ponerlo aquí,

04:38.000 --> 04:40.000
lo tenemos por
acá.

04:41.000 --> 04:43.000
Entonces, está aquí, es el
form.

04:43.000 --> 04:45.000
Vamos a estar utilizando el
form.

04:45.000 --> 04:47.000
Podemos ver que la estructura es un new post,

04:47.000 --> 04:51.000
que es el contenedor en donde existe el form.

04:51.000 --> 04:54.000
Y al form le vamos a agregar el evento de
submit

04:54.000 --> 04:56.000
para que se pueda enviar la
información

04:56.000 --> 04:58.000
que tienen estos dos
inputs.

04:58.000 --> 05:01.000
Y aquí al momento de darle click en este
botón,

05:01.000 --> 05:03.000
que tiene el tipo de
submit,

05:03.000 --> 05:05.000
que es el que como genera este trigger,

05:05.000 --> 05:08.000
tenemos que quitar este comportamiento.

05:08.000 --> 05:10.000
Así que lo primero que vamos a hacer es,

05:10.000 --> 05:19.000
vamos a venir aquí y vamos a ocupar el form.
addEventListener

05:20.000 --> 05:24.000
y vamos a decir que el evento que queremos
nosotros escuchar

05:24.000 --> 05:26.000
es un
submit.

05:28.000 --> 05:31.000
Y queremos que nos traiga el evento mismo.

05:33.000 --> 05:34.000
¿Para
qué?

05:34.000 --> 05:37.000
Una, para poder prevenir este
comportamiento que tiene.

05:37.000 --> 05:45.000
Entonces vamos
event.preventDefault

05:46.000 --> 05:51.000
y dos, para poder tener acceso a los
elementos

05:51.000 --> 05:53.000
que tiene el
formulario,

05:53.000 --> 05:56.000
para poder tener estos dos
valores.

05:56.000 --> 05:59.000
Entonces ahorita ya le estoy dando click
al botón

05:59.000 --> 06:01.000
y podemos ver que ya no se reinicia la página,

06:01.000 --> 06:04.000
así que ya ese comportamiento se está
erradicando.

06:04.000 --> 06:07.000
Ahora vamos a tomar el valor de estos dos
inputs.

06:07.000 --> 06:10.000
Entonces la forma de hacerlo es genero una
constante

06:10.000 --> 06:26.000
que se llame title igual a
event.currentTarget.querySelector

06:26.000 --> 06:33.000
y quiero que busque si ese target actual,

06:33.000 --> 06:35.000
que tiene que venir en
comillas,

06:37.000 --> 06:40.000
tenga el ID de
title.

06:42.000 --> 06:45.000
Y si sí, quiero que me traiga el value.

06:46.000 --> 06:47.000
Perfecto.

06:48.000 --> 06:50.000
Entonces vamos a hacer lo mismo con el body.

06:50.000 --> 07:04.000
Const se va a llamar content igual a event.
currentTarget.querySelector

07:04.000 --> 07:05.000
y lo
mismo.

07:05.000 --> 07:11.000
Este tiene que tener un ID que se llame
content.

07:11.000 --> 07:19.000
Muy bien, si venimos acá, aquí tenemos el
document.

07:21.000 --> 07:23.000
Vamos a darle un poquito más de espacio.

07:24.000 --> 07:27.000
Venimos al body, venimos a este section
new posts,

07:27.000 --> 07:29.000
el new posts trae el
formulario.

07:29.000 --> 07:36.000
Entonces aquí tiene que venir un input con
título

07:36.000 --> 07:39.000
y aquí un input con
content.

07:39.000 --> 07:44.000
Y estamos haciendo como el target
actual

07:44.000 --> 07:51.000
para hacerle selección a, aquí nos falta
el punto value,

07:51.000 --> 07:54.000
para que nos pueda traer el valor del
target actual

07:54.000 --> 08:01.000
que tenga un ID que haga match con los ID
que estamos nosotros seleccionando en este momento.

08:01.000 --> 08:04.000
Entonces si guardamos, aquí ya tenemos dos
constantes

08:04.000 --> 08:09.000
que van a ser las dos constantes de estos
dos inputs

08:09.000 --> 08:12.000
que nos tiene que traer el texto que
nosotros escribamos.

08:13.000 --> 08:18.000
Si en este momento pongo un console.
log, por ejemplo,

08:18.000 --> 08:26.000
y hago title,
contents,

08:26.000 --> 08:36.000
aquí pongo título y contenido y le doy enter.

08:37.000 --> 08:44.000
Aquí nos dice que hay un typo en la línea
64 con el query selector.

08:44.000 --> 08:51.000
Si venimos en la línea 64, target, podemos
guardar.

08:51.000 --> 09:01.000
Hacemos lo mismo, título, contenido,
post y listo, nos trae título y contenido.

09:01.000 --> 09:05.000
Entonces a este momento ya tenemos el
valor de nuestros inputs.

09:05.000 --> 09:07.000
¿Qué es lo que nos
falta?

09:07.000 --> 09:11.000
Nos falta simplemente mandar llamar
nuestra función.

09:11.000 --> 09:14.000
Al momento de que se genere el submits,

09:14.000 --> 09:18.000
lo que queremos es que en esta función
pueda venir el título

09:18.000 --> 09:22.000
y pueda venir el contenido que hace
relación o referencia

09:22.000 --> 09:25.000
a estas dos variables que tenemos aquí.

09:25.000 --> 09:28.000
Es perfecto, vamos a
guardar.

09:28.000 --> 09:34.000
Y aquí si guardamos, podemos venir a
networking, network.

09:36.000 --> 09:38.000
Bien, vamos a darle un poco más de espacio
a esto

09:38.000 --> 09:41.000
para poder ver bien que es lo que va a pasar.

09:42.000 --> 09:46.000
Entonces aquí podemos ver que todavía no
existe un post.

09:46.000 --> 09:53.000
Si ponemos aquí título, contenido y enviamos,

09:54.000 --> 09:56.000
podemos ver cómo aquí aparece este post.

09:56.000 --> 10:00.000
Y dice que el método que se ocupó fue un
método de post,

10:00.000 --> 10:07.000
un 201, perfecto, que fue creado, y al
dominio, y se utilizó un fetch.

10:07.000 --> 10:11.000
Si abrimos este post, podemos ver qué es
lo que se envió.

10:11.000 --> 10:15.000
Se envió el título, se envió el body,
que es el contenido,

10:15.000 --> 10:18.000
el user ID, que es un mat random generado,

10:18.000 --> 10:23.000
aquí podríamos cambiar un poco para
redondearlo a números enteros,

10:23.000 --> 10:26.000
pero se está enviando un user
ID.

10:26.000 --> 10:29.000
Y si vamos al header, podemos ver que se
está utilizando

10:29.000 --> 10:32.000
el método post a la URL que nosotros
estamos buscando,

10:32.000 --> 10:36.000
el status que se está generando, y con
esto ya estamos viendo

10:36.000 --> 10:46.000
qué es lo que se envió al
servidor.