subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/02-Promesas en JavaScript Asincronía y Manejo de Estados.vtt

WEBVTT

00:00.000 --> 00:03.800
Entendamos entonces qué son las promesas.

00:03.800 --> 00:06.920
Aquí tenemos un HTML muy
sencillo,

00:06.920 --> 00:08.840
ya lo tenemos abierto en el navegador.

00:08.840 --> 00:11.080
Vamos a pasar al
JavaScript.

00:11.080 --> 00:14.640
Entonces, las promesas es lo que nos va a
ayudar a hacer

00:14.640 --> 00:17.800
que nuestro código pase de ser
síncrono

00:17.800 --> 00:20.360
a que pueda ser un código asíncrono.

00:20.360 --> 00:22.960
Es la forma en la cual nosotros vamos a
decir al navegador,

00:22.960 --> 00:25.280
oye, esta función en
particular,

00:25.280 --> 00:27.320
tienes que trabajarla de forma
separada

00:27.320 --> 00:30.080
y ya que esté resuelta, me la puede
regresar

00:30.080 --> 00:32.280
para que yo la pueda agregar al call
stack

00:32.280 --> 00:34.040
y me pueda dar un
resultado.

00:34.040 --> 00:36.600
Y podemos tener ciertos ejemplos
ahorita

00:36.600 --> 00:39.880
para poder entender cómo se van disparando
ciertas funciones.

00:39.880 --> 00:42.120
Tendríamos dos funciones que se van a
disparar

00:42.120 --> 00:45.480
de forma síncrona y en medio de estas dos
funciones

00:45.480 --> 00:49.080
podemos generar una promesa que al momento
de que se dispare,

00:49.080 --> 00:50.840
nosotros esperaríamos tener, por ejemplo,

00:50.840 --> 00:53.400
el resultado de cada una de las funciones,

00:53.400 --> 00:55.320
pero la promesa va a venir
después

00:55.320 --> 00:58.920
porque va a ser lo último que se va a
solucionar.

00:58.920 --> 01:00.960
Entonces, ¿qué son las
promesas?

01:00.960 --> 01:03.680
Como te comentaba, las promesas es la
forma

01:03.680 --> 01:06.840
en la cual nosotros vamos a generar que
nuestro código

01:06.840 --> 01:09.840
pueda funcionar de forma
asíncrona.

01:09.840 --> 01:12.880
Y las promesas tienen tres
estados.

01:12.880 --> 01:17.320
El primer estado es pending, que es el
estado de pendiente.

01:18.560 --> 01:22.120
Este estado es cuando la promesa se va a
crear.

01:22.120 --> 01:24.160
Cuando nosotros creamos una promesa,

01:24.160 --> 01:27.920
que las promesas las vamos a trabajar de
inicio,

01:27.920 --> 01:31.840
de esta forma, se va a generar un primer
estado

01:31.840 --> 01:36.040
que es el estado de
pending.

01:38.760 --> 01:42.280
Ese estado de pending está en
pendiente

01:42.280 --> 01:44.920
porque se va a empezar a generar la promesa.

01:44.920 --> 01:47.840
El segundo estado es
fulfill.

01:47.840 --> 01:52.840
Y este estado va a venir cuando la promesa
se resuelva.

01:54.320 --> 01:57.360
Una vez que la promesa se resuelva para
bien o para mal,

01:57.360 --> 01:59.280
se va a poner en
fulfill.

01:59.280 --> 02:03.280
Y el tercer estado es
reject,

02:04.720 --> 02:07.000
que es cuando la promesa no se resolvió.

02:07.840 --> 02:10.320
Por algún punto, la promesa no se
resolvió

02:10.320 --> 02:12.680
y ese es el estado que nos va a regresar.

02:12.680 --> 02:16.440
Ahora, las promesas manejan dos tipos de
callback.

02:16.440 --> 02:18.640
La primera es
resolve,

02:20.360 --> 02:25.000
que evidentemente es cuando la promesa se
resuelve

02:25.000 --> 02:27.160
de forma
satisfactoria.

02:27.160 --> 02:29.840
Y la segunda es
reject,

02:29.840 --> 02:33.800
que es cuando la promesa no se puede resolver.

02:33.800 --> 02:35.240
Es importante poder
entender

02:35.240 --> 02:37.720
lo que son los estados de la promesa,

02:39.920 --> 02:40.840
que son
estos.

02:41.800 --> 02:45.080
Y de igual forma, es importante poder
entender

02:45.080 --> 02:50.080
cuáles son los callbacks que tienen las
promesas.

02:52.000 --> 02:55.440
También vamos a poder tener dos métodos en
las promesas

02:55.440 --> 02:56.480
que son
importantes.

02:56.480 --> 02:59.840
Nosotros generamos una primer función como
una promesa,

02:59.840 --> 03:04.520
pero podemos utilizar el then, que es un
método.

03:04.520 --> 03:08.000
Este método se ejecuta cuando la promesa
se resuelve.

03:08.000 --> 03:12.320
Una vez que la promesa está lista, ya está
fulfill,

03:12.320 --> 03:15.120
y está como con un callback de se resuelve,

03:15.120 --> 03:18.360
entonces va a entrar a ejecutarse el then.

03:18.360 --> 03:21.840
Y tenemos otro método que se llama catch.

03:21.840 --> 03:26.360
Este es importante porque el catch es lo
que va a suceder

03:26.360 --> 03:28.480
cuando la promesa no se
resuelve,

03:28.480 --> 03:33.000
y en el catch vamos a poder nosotros
obtener el error

03:33.000 --> 03:35.560
para poder imprimirlo y que nos pueda
decir

03:35.560 --> 03:36.920
qué es lo que está
pasando

03:36.920 --> 03:39.520
que hace que la promesa no se resuelva.

03:39.520 --> 03:41.480
Comencemos con el
ejemplo.

03:41.480 --> 03:46.160
Empezamos con una constante, se va a
llamar promesa,

03:46.160 --> 03:51.160
y aquí vamos a construir una instancia de
promesa.

03:54.880 --> 03:59.760
Esta instancia va a tener dos
parámetros

03:59.760 --> 04:03.520
que va a ser resolve y
reject.

04:04.960 --> 04:06.840
Ya que lo tenemos
ahí,

04:06.840 --> 04:11.840
terminamos con la sintaxis de nuestra promesa,

04:12.960 --> 04:16.640
y aquí vamos a mandar llamar un
setTimeout

04:16.640 --> 04:19.160
para generar como una
validación.

04:19.160 --> 04:21.120
Vamos a, por
ejemplo,

04:21.120 --> 04:25.240
tener como si estuviéramos haciendo a lo
mejor

04:26.880 --> 04:28.280
el llamado de un
API,

04:28.280 --> 04:29.760
y estamos esperando que se
resuelva

04:29.760 --> 04:31.280
y que nos regrese
algo.

04:31.280 --> 04:34.200
Entonces, para que esto pueda funcionar,

04:34.200 --> 04:37.880
el setTimeout nos va a ayudar para darle
un tiempo

04:37.880 --> 04:40.840
a que este llamado del API se pueda resolver,

04:40.840 --> 04:43.760
y una vez que esté resuelto, nos regrese
el resultado.

04:43.760 --> 04:45.040
Aquí lo vamos a
fakear,

04:46.320 --> 04:47.600
lo vamos a llamar un
API,

04:47.600 --> 04:50.040
vamos a generar una
variable

04:50.040 --> 04:54.560
que nos fakee el resultado de la respuesta,
¿no?

04:54.560 --> 04:56.640
Entonces tenemos nuestro setTimeout.

04:58.320 --> 04:59.400
Ya estando
acá,

04:59.400 --> 05:01.720
aquí es donde pondríamos nosotros como el
código

05:01.720 --> 05:04.240
si estuviéramos haciendo la petición de un
API,

05:04.240 --> 05:06.280
vamos a utilizar un fetch o algo similar,

05:06.280 --> 05:09.720
yo voy a generar una variable que se llama
operation

05:12.040 --> 05:12.880
successFull,

05:15.200 --> 05:17.240
y va a ser igual a
true,

05:17.240 --> 05:19.320
dando como
referencia

05:19.320 --> 05:24.320
de que lo que pasó aquí en el código del
setTimeout

05:24.480 --> 05:26.080
regresó a éxito,
¿no?

05:26.080 --> 05:28.040
Entonces podemos
continuar.

05:28.040 --> 05:29.040
Y en la parte de
abajo,

05:29.040 --> 05:31.440
voy a hacer una pequeña
validación.

05:31.440 --> 05:33.240
Si
operation

05:34.520 --> 05:35.360
successFull,

05:38.200 --> 05:39.080
si
operación,

05:39.080 --> 05:42.720
si esta operación fue
exitosa,

05:42.720 --> 05:43.680
entonces

05:44.800 --> 05:47.120
regrésame el
result.

05:48.280 --> 05:50.080
¿Quiere aquí en el
result?

05:50.080 --> 05:51.480
Podemos poner
como

05:53.680 --> 05:54.600
la
operación

05:54.600 --> 05:59.600
fue
exitosa.

06:02.000 --> 06:04.280
Y en caso de que no sea
exitosa,

06:05.880 --> 06:07.920
me va a regresar el
reject.

06:16.560 --> 06:17.560
Ahí va la
operación.

06:17.560 --> 06:22.560
Aquí ponemos
acentos.

06:25.960 --> 06:29.000
Y este if, esta
validación,

06:29.000 --> 06:33.240
tiene que ir adentro de nuestro setTimeout.

06:33.240 --> 06:34.800
Y ya que estamos con
esto,

06:34.800 --> 06:37.360
entonces le decimos que queremos que se
resuelva

06:37.360 --> 06:39.160
en dos
segundos.

06:40.680 --> 06:43.640
Entonces es el tiempo que le vamos a dar
al setTimeout

06:43.640 --> 06:45.600
para que pueda resolver esta operación.

06:45.600 --> 06:48.640
Aquí, como nosotros le estamos
poniendo

06:48.640 --> 06:50.800
que la operación sí fue
exitosa,

06:50.800 --> 06:53.480
esto va a pasar y nos tendrá que
resolver

06:53.480 --> 06:56.280
con, oye, la operación fue
exitosa.

06:56.280 --> 06:58.280
En caso de que esto no
pasara,

06:58.280 --> 07:00.440
digamos, alguna petición o un
API,

07:00.440 --> 07:03.000
de repente nos regresara como un false,

07:03.000 --> 07:06.160
entonces aquí entraría el
else

07:06.160 --> 07:07.560
y nos regresaría el
reject.

07:08.560 --> 07:10.440
Entonces ahorita vamos a
guardar.

07:12.280 --> 07:13.680
Si venimos aquí a
navegador,

07:13.680 --> 07:16.480
y mandamos llamar nuestra
función,

07:16.480 --> 07:17.320
le damos
enter,

07:18.600 --> 07:21.160
vemos aquí que nos está regresando algo.

07:21.160 --> 07:23.320
Nos está regresando una
promesa,

07:23.320 --> 07:26.120
nos está diciendo que la promesa ya fue
resuelta,

07:26.120 --> 07:28.000
fulfill, ya está
lista,

07:28.000 --> 07:30.640
y nos está regresando entonces el resultado.

07:30.640 --> 07:33.520
Quiere decir que la operación fue exitosa.

07:33.520 --> 07:34.360
¿Por
qué?

07:34.360 --> 07:38.240
Porque aquí le estamos diciendo que lo
esperado es verdad.

07:38.240 --> 07:39.640
Ahora, si cambiamos
esto,

07:39.640 --> 07:40.840
y
guardamos,

07:40.840 --> 07:42.240
vamos a ver que nos
regresa.

07:46.120 --> 07:47.440
Nos regresa lo
mismo,

07:47.440 --> 07:50.880
por aquí nos dice que nos está regresando
el reject,

07:50.880 --> 07:54.400
y nos está regresando el mensaje de esto
falló,

07:54.400 --> 07:57.240
y entonces es la operación
falló.

07:57.240 --> 07:58.960
Este es un ejemplo
básico.

07:58.960 --> 08:01.440
Ahora, ¿cómo nosotros podríamos
obtener?

08:01.440 --> 08:04.040
Aquí nosotros tenemos que venir a la
terminal

08:04.040 --> 08:06.480
a poder poner la
operación,

08:06.480 --> 08:11.400
venir a la terminal a poder poner la
función

08:11.400 --> 08:13.640
para poder ver en la terminal que es lo
que está pasando,

08:13.640 --> 08:16.600
pero ¿cómo nos puede regresar
automáticamente

08:16.600 --> 08:19.200
esta función, el
resultado?

08:19.200 --> 08:20.800
Nos regresamos a nuestro
código,

08:21.640 --> 08:23.440
utilizamos nuestra
función,

08:24.600 --> 08:26.760
y aquí es donde vamos a estar
utilizando

08:26.760 --> 08:30.400
los métodos que tienen las promesas.

08:31.440 --> 08:33.200
Podemos venir
aquí,

08:33.200 --> 08:36.840
y utilizamos punto y el método
uno.

08:36.840 --> 08:38.680
Entonces el método
den,

08:38.680 --> 08:42.560
lo que hace es se ejecuta cuando la
promesa se resuelve.

08:42.560 --> 08:45.640
Entonces lo que va a hacer es que va a
ejecutar,

08:45.640 --> 08:47.880
una vez que la promesa se
resuelve,

08:47.880 --> 08:50.800
lo que nosotros queremos traer es lo que
sea

08:50.800 --> 08:53.720
que va a estar viniendo aquí en este código.

08:53.720 --> 08:56.000
Entonces aquí le estamos diciendo como den,

08:57.240 --> 09:01.080
y lo que queremos que nos traiga es un
mensaje

09:01.080 --> 09:04.360
que el mensaje tiene que ser como el
mensaje de éxito

09:04.360 --> 09:06.560
en este momento, entonces podemos ponerle,

09:07.560 --> 09:10.520
success
message,

09:14.160 --> 09:17.160
y el código aquí va a ser nada más un console.
log.

09:21.160 --> 09:22.880
Y en el
console.log,

09:22.880 --> 09:27.880
queremos que nos imprima el mensaje de éxito,

09:27.920 --> 09:29.880
que tendría que ser este
mensaje.

09:29.880 --> 09:32.840
Ahora, si esto no se resuelve a favor,

09:32.840 --> 09:34.840
estamos esperando entonces un catch.

09:36.080 --> 09:37.840
¿Qué es lo que
pasó?

09:37.840 --> 09:40.800
Nos interesa de perfecto, si esto no fue
un éxito,

09:40.800 --> 09:43.240
si no me está regresando el código que yo
esperaba,

09:43.240 --> 09:45.520
entonces regresame el
error.

09:51.360 --> 09:53.640
Y con el error hacemos lo
mismo.

09:53.640 --> 09:55.120
¿Cuál es el
código?

09:55.120 --> 09:57.840
O qué es lo que estamos esperando que se
ejecute,

09:57.840 --> 09:59.920
si existe un
error.

10:01.600 --> 10:03.400
Y en este caso, solo para el ejemplo,

10:03.400 --> 10:05.640
lo que yo estoy esperando que se
ejecute

10:05.640 --> 10:07.920
es prácticamente el mensaje de
error

10:07.920 --> 10:10.160
que yo tenía
planificado.

10:10.160 --> 10:11.120
Entonces
guardamos.

10:13.160 --> 10:16.560
Se tomó un tiempo y aquí nos dice que
tenemos un error

10:16.560 --> 10:18.840
en la línea 17 y está
acá.

10:21.440 --> 10:23.240
Entonces si ahora volvemos a guardar,

10:24.440 --> 10:27.320
bien, aquí está otro
typo.

10:27.320 --> 10:28.400
Perfecto.

10:28.400 --> 10:30.480
Entonces al momento de que yo estoy guardando,

10:30.480 --> 10:31.720
se está
demorando,

10:31.720 --> 10:33.320
pero está demorando los dos
segundos

10:33.320 --> 10:34.640
que le estoy poniendo
aquí.

10:34.640 --> 10:36.200
Entonces si yo vuelvo a
cargar,

10:37.560 --> 10:40.320
dos segundos y ahora,
perfecto,

10:40.320 --> 10:42.280
ya nos dice la operación
falló.

10:42.280 --> 10:43.680
¿Por qué está
fallando?

10:43.680 --> 10:45.560
Porque aquí en la
promesa,

10:45.560 --> 10:48.760
yo le estoy poniendo que sea diferente a true.

10:48.760 --> 10:52.440
Si quitamos ese, que sea diferente a
true

10:52.440 --> 10:53.640
y le damos
guardar,

10:54.560 --> 10:56.440
se tarda dos
segundos

10:56.440 --> 10:57.480
y entonces ya nos
regresa,

10:57.480 --> 10:59.720
oye, la operación fue
exitosa.

10:59.720 --> 11:02.000
Entonces el then y el
catch

11:02.000 --> 11:03.640
es lo que nosotros vamos a
utilizar

11:03.640 --> 11:05.920
para poder ejecutar el
resultado

11:05.920 --> 11:07.360
que venga de nuestra
promesa,

11:07.360 --> 11:09.960
que en este caso, nuestra promesa tiene un
setTimeout,

11:09.960 --> 11:12.440
que también es prácticamente una promesa.

11:13.400 --> 11:15.560
Y una vez que eso se termina de ejecutar,

11:15.560 --> 11:18.640
mandamos llamar nuestra promesa con el
then

11:18.640 --> 11:20.160
para que se ejecute el
código

11:20.160 --> 11:22.280
que esperamos una vez que la
promesa

11:22.280 --> 11:26.080
pues se haya resuelto de forma exitosa.

11:26.080 --> 11:28.280
Y en caso de que eso no
funcione,

11:28.280 --> 11:30.440
entonces que nos regrese el
catch

11:30.440 --> 11:32.760
para que nosotros podamos saber
principalmente

11:32.760 --> 11:33.720
cuál fue el
error

11:33.720 --> 11:58.720
y por qué no se resolvió la promesa como
lo esperábamos.