Introducción a JavaScript

1

¿Por qué aprender JavaScript?

2

¡Hola Mundo! en Mac

3

¡Hola Mundo! en Windows

4

Anatomía de una variable

5

Tipos de datos en JavaScript

6

Creación de strings

7

Operadores aritméticos

8

Conversión de tipos: Type Casting y Coerción

9

Conversión de tipos explícita e implícita

Estructuras de Control y Lógica

10

Operadores de comparación

11

Operadores lógicos

12

Ejecución condicional: if

13

Ejercicio: Adivina el número

14

Ejecución condicional: switch

15

Loop: for

16

Loop: for of

17

Loop: for in

18

Loop: while

19

Loop: do while

Funciones y This

20

Anatomía de una función

21

Funciones vs Métodos

22

Funciones puras e impuras

23

Arrow function y enlace léxico

24

Contextos de ejecución y scope chain

25

¿Qué es Closure?

26

Preguntas a Desarrolladores Senior: ¿Por qué aprender Desarrollo Web?

Manipulación de Arrays

27

Introducción a Arrays

28

Mutabilidad e inmutabilidad de Arrays

29

Modificación básica del final con push( ), pop( )

30

Iteración con map( ) y forEach( )

31

Filtrado y reducción con filter( ) y reduce( )

32

Búsqueda de elementos con find( ) y findIndex( )

33

Crear copias con slice( )

34

Spread operator: casos de uso

Programación Orientada a Objetos

35

Anatomía de un Objeto

36

Trabajando con objetos en JavaScript

37

Función constructora

38

¿Qué es una clase?

39

Prototipos y herencias

40

Herencia en la práctica

41

Prototipos en la práctica

42

this en JavaScript

43

Proyecto: Crea una red social

44

Proyecto: Crea una red social parte 2

Asincronía en JavaScript

45

¿Cómo funciona el JavaScript Engine?

46

Promesas en JavaScript

47

Usando Async y await en JavaScript

48

For await of

49

¿Cómo funciona la web?

50

¿Cómo funciona HTTP?

51

Método GET en JavaScript

52

Método POST en JavaScript

53

Método DELETE en JavaScript

54

Importancia del id en el método DELETE

55

ECMAScript 6 y tus siguientes pasos

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Promesas en JavaScript

46/55
Recursos

Aportes 17

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

## Promesas en JavaScript Las promesas (**promises**) en JavaScript son un concepto fundamental para manejar operaciones asincrónicas. Permiten a los desarrolladores escribir código más limpio, organizado y manejable al lidiar con tareas que se ejecutan en el tiempo, como la recuperación de datos de una API o la ejecución de tareas en segundo plano. **¿Qué es una operación asincrónica?** Una operación asincrónica es una tarea que se inicia y luego se ejecuta en un momento posterior, sin bloquear el hilo principal de ejecución. Esto permite que el programa continúe ejecutando otro código mientras la operación asincrónica se completa. **¿Cómo funcionan las promesas?** Las promesas se basan en dos estados principales: * **Pendiente:** La promesa aún no se ha completado ni rechazado. * **Resuelta:** La operación asincrónica se completó con éxito y se devuelve un valor. * **Rechazada:** La operación asincrónica falló y se genera un error. Una promesa se crea utilizando el constructor `Promise()`. Dentro del constructor, se pasa una función asíncrona como argumento. Esta función asíncrona, también conocida como función de resolución o rechazo, recibe dos argumentos: * **Resolve:** Una función que se llama cuando la operación asincrónica se completa con éxito. Se le pasa un valor como parámetro, que representa el resultado de la operación. * **Reject:** Una función que se llama cuando la operación asincrónica falla. Se le pasa un error como parámetro, que representa la causa del fallo. **Encadenamiento de promesas:** Las promesas se pueden encadenar utilizando los métodos `then()` y `catch()`. El método `then()` se utiliza para procesar el valor devuelto cuando la promesa se resuelve, mientras que el método `catch()` se utiliza para manejar errores.
**Promise** Una promesa es un objeto que representa la eventual finalizacion (o falla) de una operacion asincrona. *<u>Estados:</u>* * Pending: estado inicial, ni cumplida ni rechazada. * Fullfilled: la operacion se completo con exito. * Rejected: la operacion fallo. *<u>Metodos principales:</u>* * then(): maneja el caso de de exito * catch(): maneja los errores * finally(): se ejecuta al finalizar, independiente al resultado Ejemplo: ```js // Simulacion de funcion que obtiene datos del servidor function obtenerDatosDelServidor(id){ return new Promise((resolve, reject) => { setTimeout(() => { if(id === 1) { resolve({id:1, nombre: "Juan", edad: 30}) } else { reject("ErrorL Usuario no encontrado") } }, 2000) }) } // Uso de la promesa console.log("Iniciando busqueda...") obtenerDatosDelServidor(1) .then((usuario) => { console.log("Usuario encontrado:", usuario) return usuario.edad }) .then((edad) => { console.log("La edad del usuario es:", edad) }) .catch((error) => { console.error(error) }) .finally(() => { console.log("Busqueda finalizada") }) ```
### 2. ¿Qué hace la función asíncrona? Lo que hace que la operación sea asíncrona es el uso de `setTimeout`. * `setTimeout` es una función asíncrona que pone en cola la función proporcionada para que se ejecute después de un cierto período de tiempo (en este caso, 3000 milisegundos o 3 segundos). * La función que se pasa a `setTimeout` (`() => { ... }`) se ejecutará después de 3 segundos. Esto es lo que introduce el comportamiento asíncrono. * Mientras tanto, el flujo de ejecución del programa continúa, y cualquier código después de la creación de la promesa se ejecutará inmediatamente sin esperar a que `setTimeout` termine.
La estructura de promesa de Diego, pero se toma cinco segundos en decirte si has aprobado o no: ```js const didIpass = new Promise((pass, fail) => { console.log('Let me check...') setTimeout(() => { const examGrade = Math.floor(Math.random() * (8 - 0) + 0) let finalGrade = examGrade if(examGrade > 4){ finalGrade = examGrade + 2 pass(console.log(`Congrats! Your exam grade is ${examGrade} so you get your attitude points, turning it into a ${finalGrade}`)) } else { fail(console.log(`Mmm... I am afraid I cannot add your attitude points, your final grade stays a ${finalGrade}`)) } }, 5000) }) didIpass ```
**RESUMEN:** ![](https://static.platzi.com/media/user_upload/image-ee2e752e-49c0-4490-a58b-23f295e7079e.jpg)
### Apara añadir. existen formas de usar asincronismo en JS: 1\. Callbacks * **Descripción:** Las funciones de retrollamada (callbacks) son funciones que se pasan como argumentos a otras funciones y se ejecutan después de que la operación asíncrona se completa. Esta es una de las formas más antiguas de manejar el asincronismo en JavaScript y puede llevar a un problema conocido como "callback hell" cuando se anidan múltiples callbacks. ### 2. Promesas (Promises) * **Descripción:** Las promesas son objetos que representan el eventual resultado de una operación asíncrona, ya sea éxito o fallo. Proveen métodos `then` y `catch` para manejar los resultados de manera más estructurada que los callbacks, evitando el "callback hell". Una promesa puede estar en uno de tres estados: pendiente (pending), cumplida (fulfilled) o rechazada (rejected). ### 3. async/await * **Descripción:** `async` y `await` son sintaxis modernas introducidas en ES2017 (ECMAScript 2017) que permiten escribir código asíncrono de manera más clara y legible, similar al código síncrono. Una función marcada con `async` devuelve una promesa, y `await` se usa para esperar la resolución de esta promesa. Esto simplifica el manejo de promesas al eliminar la necesidad de encadenar múltiples `then`. ###
En la sección del código en la que se ejemplifica .then() y .catch() ¿cómo successMessage y errorMessage acceden al mensaje de éxito o error? No veo ninguna variable que los una o alguna función que saque esos mensajes. 🤔 Apenas estoy en esto, perdon la ignoracia 😅
No es "fullfiled" es "fulfilled"
El método `then` espera una función que se ejecuta cuando la promesa es cumplida (fulfilled). Esta función recibe el resultado de la promesa como argumento. Por ejemplo: ```javascript promesa.then(resultado => { console.log(resultado); }); ``` El método `catch`, por otro lado, espera una función que se ejecuta cuando la promesa es rechazada. Esta función recibe el error como argumento. Por ejemplo: ```javascript promesa.catch(error => { console.error(error); }); ``` Ambos métodos son fundamentales para manejar el flujo de control en la programación asíncrona en JavaScript.
La sintaxis de `.then()` en JavaScript se utiliza con promesas y se ve de la siguiente manera: ```javascript promesa.then(function(resultado) { // Código a ejecutar cuando la promesa se resuelve }).catch(function(error) { // Código a ejecutar si la promesa es rechazada }); ``` - `resultado`: el valor devuelto por la promesa cuando se resuelve. - `error`: el motivo del rechazo si la promesa no se resuelve. Es importante que uses `.catch()` para manejar posibles errores.
1\. \*\*Callbacks\*\*: Funciones que se llaman cuando una tarea termina. 2\. \*\*Promesas\*\*: Un recibo de que algo va a llegar, pero no puedes usarlo hasta que llega. 3\. \*\*Async/Await\*\*: Una forma fácil de esperar a que las promesas se resuelvan. 4\. \*\*Error Handling\*\*: Manejar lo que pasa cuando las cosas no salen como esperabas.
La diferencia entre sincronicidad y asincronía en JavaScript se puede ilustrar con la analogía de un restaurante. En un restaurante sincrónico, el cliente realiza un pedido y debe esperar en la mesa hasta que su comida esté lista antes de poder hacer cualquier otra cosa. En cambio, en un restaurante asincrónico, el cliente hace su pedido y puede ir a leer un libro mientras espera que le traigan la comida. Cuando la comida está lista, el camarero la lleva a la mesa. Esto se traduce en JavaScript donde la ejecución de código sincrónico se detiene hasta que se completa una tarea, mientras que la ejecución asincrónica permite continuar con otras operaciones mientras se espera que una tarea se complete.
me ha costado un poco entender la clase y este video en yotube me ayudo muchisimo. <https://www.youtube.com/watch?v=ZTC0Gfhdzfc&t=1712s> espero les sirva como a mi 😘
## ¿Qué es una promesa en JavaScript? **Las promesas en JavaScript no solo representan el resultado de una operación asincrónica, sino que también proporcionan métodos que facilitan el manejo y la manipulación de los datos una vez que la promesa se resuelve.** **Una promesa es un objeto que representa un valor que puede que esté disponible «ahora», en un «futuro» o que «nunca» lo esté. Como no se sabe cuándo va a estar disponible, todas las operaciones dependientes de ese valor, tendrán que posponerse en el tiempo.** ## Métodos de las promesas en JavaScript **Aquí están algunos de los métodos más comunes que puedes utilizar:** * **.then()**: Este método se utiliza para manejar el resultado exitoso de una promesa. Recibe una función que se ejecutará cuando la promesa se resuelva con éxito y puede recibir el resultado como argumento. * **.catch()**: Se utiliza para manejar errores que puedan ocurrir durante la ejecución de la promesa. Puedes encadenar *.catch()* después de *.then()* para manejar errores específicos. * **.finally()**: Este método se utiliza para ejecutar una función después de que la promesa se resuelva o se rechace, independientemente del resultado. Es útil para realizar tareas de limpieza o acciones que deben ocurrir sin importar el resultado de la promesa. * **Promise.all(iterable)**: Este método permite manejar múltiples promesas al mismo tiempo y resuelve una promesa una vez que todas las promesas del iterable se hayan resuelto o alguna de ellas se haya rechazado. * **Promise.race(iterable)**: Este método resuelve una promesa tan pronto como una de las promesas en el iterable se resuelva o se rechace. Es útil cuando deseas obtener el resultado más rápido de múltiples promesas. ## Estados de las promesas en JavaScript **Una promesa puede estar en los siguientes tres estados:** * **Pendiente** (*pending*). Es el estado inicial al crear una promesa. * **Resuelta con éxito** (*fulfilled*). Estará resuelta en el momento que llamemos a resolve y, a continuación, se ejecutará la función que pasamos al método *.then*. Debemos de tener en cuenta que, una vez resuelta, no podremos modificar el valor de la promesa, aunque sí podríamos correr la misma instrucción para obtener un valor distinto y hacerlo las veces que deseemos. * **Rechazada** (*rejected*). También puede ocurrir que se complete pero sea rechazada por un error, pasando a continuación a ejecutar la función que pasamos a *.catch*.
En JavaScript, las *promesas* son una herramienta fundamental para trabajar con operaciones asincrónicas, como la recuperación de datos de una API o la ejecución de tareas en segundo plano. Las promesas nos ayudan a escribir código más limpio y organizado, manejando tareas que se completan en el tiempo sin bloquear el hilo principal de ejecución. **Crea una promesa** Una promesa se crea usando el constructor `Promise()`, que recibe una función asíncrona con dos argumentos: `resolve` y `reject`. * `resolve` se llama si la operación es exitosa. * `reject` se llama si ocurre un error. ```js const promesa = new Promise((resolve, reject) => { setTimeout(() => { const exito = true; if (exito) { resolve("¡Operación exitosa!"); } else { reject("Hubo un error."); } }, 2000); // Simula una operación de 2 segundos }); ``` #### Encadenamiento de Promesas Una de las ventajas de las promesas es su capacidad para encadenarse con `.then()` y `.catch()`, lo que permite manejar resultados y errores de forma secuencial. ```js promesa .then((mensaje) => { console.log(mensaje); // Si la promesa se resuelve, se ejecuta este código return "Siguiente operación exitosa"; }) .then((resultado) => { console.log(resultado); }) .catch((error) => { console.error(error); // Si la promesa es rechazada, se maneja aquí }); ``` #### Ejemplo: Simulación de una API Imaginemos que queremos simular una llamada a una API para obtener datos de un usuario. Esto se puede lograr fácilmente con una promesa: ```js const obtenerUsuario = new Promise((resolve, reject) => { setTimeout(() => { const exito = true; if (exito) { resolve({ nombre: "Juan", edad: 30 }); } else { reject("Error al obtener los datos del usuario."); } }, 1000); }); obtenerUsuario .then((usuario) => { console.log(`Usuario obtenido: ${usuario.nombre}, ${usuario.edad} años`); }) .catch((error) => { console.error(error); }); ```
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-09-12%20174027-f3660a41-dbae-4a7d-8c5b-ec9e2c8dddf1.jpg) ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-09-12%20174054-9af55377-0788-4373-8f74-0b815ec62a09.jpg)
Si copiáis un bloque de código, el símbolo de mayor que '>' (y supongo que el de menor que '<' será '\&lt) se van a ver como "\&gt" porque la sección de aportes hace una conversión rara con el html por esto de aquí: <https://www.w3schools.com/html/html_entities.asp> Así que si queréis probar en vuestra consola o editor de texto algún código de los comentarios, aseguraos de reemplazar los '\&gt' por '>' y los '\&lt' por '<'. ![](https://static.platzi.com/media/user_upload/%3E-a888fae8-ea52-421c-ba88-b16e451a20e2.jpg)