Promesas

Clase 27 de 51 • Fundamentos de JavaScript 2017

Resumen

Las Promesas son objetos y están asociadas con alguna tarea asincrónica.

Existen tres estados internos de las Promesas:

Pending
Fullfiled
Rejected

El constructor Promise tiene dos parámetros:

const promise = new Promise(function (resolve, reject) { 

)}
//Promise es un constructor que recibe una función con dos argumentos.

Hamilton Zambrano

student•

Saludos

Les sugeriría mejorar esta lección y la anterior, me parece un ejemplo muy complicado y la explicación poco clara tomando en cuenta que la va a ver gente que apenas está aprendiendo a programar

Miguel Carmona Cantillo

student•

El tema de los callbacks anidados, las promises y en general la programación asíncrona son temas complejos así que si no has trabajado con estos conceptos antes es difícil de entender a la primera.

Y si estas comenzando a programar es más recomendable el curso de programación básica ya que este da por sentado que mas o menos tienes experiencia previa en otros lenguajes.

Manu

student•

Totalmente de acuerdo con tu sugerencia

Respecto a la contestacion de mglcarmona " Y si estas comenzando a programar es más recomendable el curso de programación básica ya que este da por sentado que mas o menos tienes experiencia previa en otros lenguajes."
Totalmente en desacuerdo, entre el curso de programacion basica y este existe un agujero que deja al alumno colgado y frustrado. La solucion es una clase intermedia donde se explique un poco mejor la base de estos temas mas complejos.

Maria Elena Orozco Chavarria

student•

function get(URL){
	//New Promise recibe una funcion
	return new Promise((resolve, reject)=>{
		const xhr = new XMLHttpRequest();

		xhr.onreadystatechange = function () {
			const DONE = 4
			const OK = 200
			if (this.readyState === DONE) {
				if(this.status === OK){
					//Todo OK
					resolve(JSON.parse(this.responseText))
				}else {
					//Hubo un error
					reject(new Error(`Se produjo un error al realizar el request ${this.status}`))
				}
			} 
		}

		xhr.open('GET', URL);
		xhr.send(null);
	})
}

/* Funcion para tratar el error */
function handleError(err){
	console.log(`Request failed: ${err}`) 
}

let luke

/*llamada al metodo */
get('http://www.swapi.co/api/people/1/')
	//lamada a funcion normal
	.then(function(response){
		luke = response
		//promesa
		return get(luke.homeworld)
	})
	//llamada a funcion con arrow functions
	.then((homeworld)=>{
		luke.homeworld = homeworld
		console.log(`${luke.name} nació en ${luke.homeworld.name}`)
	})
	.catch((err)=> handleError(err))

Arturo Castillo

student•

Gracias Bro! los comentarios ayudan un monton

Marcos Daniel Villamediana Calderón

student•

Hay que editarle algunas cosas que estan pegadas y a mi no me funcionaba el código hasta que en la url le puse “https…”, pero si me ayudó mucho :3

Juan Pablo Duque Ordoñez

student•

Acá en platzi explican mejor las promesas https://platzi.com/blog/que-es-y-como-funcionan-las-promesas-en-javascript/

Lucas Zanek

student•

Muchas gracias!! Entendi mas en ese enlace que con este video!

Miguel Angel Gatto

student•

En la descripción del video podrían agregar ese dato!!

Alberto Hernández López

student•

Buen día chicos,

Les dejo aquí el código con GET y FETCH,

//Las promesas pueden tener tres estados y estan asociados 
// con tareas asincronicas, los tres estados son pending, fullfill
//rejected - se produjo un error
const promise = new Promise(function(resolve, reject) {
  //En esta funcion debemos realizar una tarea asincrona
  //Esimportante llamar a resolve o reject, a cualquiera de los
  // dos, detro de este cuerpo de la funcion de promise
  setTimeout(function() {
    reject(new Error('Se produjo un error'))
  }, 1000)
})

//con then podemos obtener el resultado exitoso y en caso
// de tener un resultado no exitoso lo atrapamos con catch
promise
 .then(function() {
  
 })
 .catch(function(err) {
  
 })

//Para este caso ya no vamos a necesitar los callback 
// Pues con promise nos podemos ahorrar estas peticiones y solo 
// vamos a necesitar la URL de las peticiones que necesitaremos
function get(URL/*, callback*/ /*onfinish*/) {
  // Usando promesas
  return new Promise(((resolve, reject) => {
    const xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
    const DONE = 4;
    const OK = 200;
    if (this.readyState == DONE) {
      if (this.status == OK) {
        //TODO OK
        //Primero va el error y despues la respuesta ya sea que se haya cumplido o no con el request
        // JSON.parse(argumento) convierte un texto plano a formato JSON.
        resolve(JSON.parse(this.responseText));
        //response text contiene todos los parametros de la respuesta de la peticion y se convierte a formato JSON.
        } else {
        //HUBO UN ERROR
          reject(new Error("Se produjo un Error al realizar el request" + this.status)
          );
          console.log(xhr.status);
        }
      }
    };

    xhr.open("GET", URL);
    xhr.send(null);
  }))
//   Utilizando Callbacks
//   const xhr = new XMLHttpRequest();

//   xhr.onreadystatechange = function() {
//     const DONE = 4;
//     const OK = 200;
//     if (this.readyState == DONE) {
//       if (this.status == OK) {
        //TODO OK
        //Primero va el error y despues la respuesta ya sea que se haya cumplido o no con el request
        // JSON.parse(argumento) convierte un texto plano a formato JSON.
        // callback(null, JSON.parse(this.responseText));
        //response text contiene todos los parametros de la respuesta de la peticion.
      // } else {
        //HUBO UN ERROR
        // callback(
          // new Error("Se produjo un Error al realizar el request" + this.status)
        // );
        // console.log(xhr.status);
      // }
    // }
  // };

  // xhr.open("GET", URL);
  // xhr.send(null);
}

function _handleError(error) {
  console.log(`Resquested failed: ${error}`);
}
//En este caso then recibe una funcion la cual a su vez 
//recibe como parametro lo que nos devuelve la promesa cuando 
// fue exitosa en este caso el JSON.parse
let luke;
get("https://swapi.co/api/people/1/")
  .then((response) => {
  luke = response;
  return get('https://swapi.co/api/planets/1/')
})
  .then((homeworld) => {
  luke.homeworld = homeworld; 
  console.log(`${luke.name} nació en ${homeworld.name}`);
  console.log(`${luke.name} nació en ${luke.homeworld.name}, codigo con igualdad de objeto`);
})
.catch((err) => _handleError(err));

//Utilizando el metodo Fetch 
//Fetch realiza algo similar a get y que funciona tambien con 
// promesas, es soportado de manera nativa en mucho de los navegadores, el cual soporta formatos AJAX, POST, REQUEST.
var lukeFetch;
fetch("https://swapi.co/api/people/1/")
  .then(response =>  
//Este response me regresa un JSON 
    response.json())
  .then(json => {
    lukeFetch = json; 
    return fetch('https://swapi.co/api/planets/1/');
  })
  .then((response) => response.json())
  .then(json => {
    lukeFetch.homeworld = json; 
    console.log(`${lukeFetch.name} nació en ${json.name}, código con FETCH`);
    console.log(`${lukeFetch.name} nació en ${lukeFetch.homeworld.name}, codigo con igualdad de objeto con FETCH`);
  })
  .catch((err) => _handleError(err));

Abel Herculano Martínez

student•

Excelente para repasar el código, las veces que sean necesarias, muchas gracias!!

Carlos Ferrer

student•

Gracias por pasar el código con comentarios mu útiles.

Victor Alfonso Caballero Cabrera

student•

Si gente, ya sabemos que esta complejo, pero obvio no se queden solo con el video acá un buen link. Dime mas de Promesas

Daniel Hidalgo

student•

La gente paga por estos cursos. Es obligación de Platzi explicar bien las clases… y si… no está de más leer otras páginas pero como apoyo.

Ezequiel Miguel Brandan

student•

$450 pesos argentinos por mes pago para q me den ellos estos conocimiento, si no me iria de una a google y no pago nada…

Fernando Manuel Sierra Sánchez

student•

Esta lección te llega a frustrar mucho. Vengo del curso de programación básica, y he seguido el curso de Fundamentos de JS entendiendo la mayoría de conceptos.
Está claro que Sacha es un gran programador y domina con soltura este lenguaje, pero en esta lección vuelve atrás y adelante en la explicación, es casi imposible de seguir.

Eder Torres

student•

Me uno a los que dicen que este vídeo y el pasado están un poco fuera de alcance, especialmente porque no se explica si se va a usar codePen forzosamente o es solo una herramienta opcional, y como se acopla todo esto a los documentos en .js que hemos estado haciendo en el editor de texto !

Antonio Martínez

student•

Me reafirmo en mi anterior comentario en el video pasado.

Me parece un despropósito didáctico esta clase.
No se explica nada a los alumnos que hemos matriculado en fundamentos. El profesor se está explicando a sí mismo el código, no a los alumnos.

Camilo Castillo

student•

apoyo tu pensamiento, no entiendo por que platzi no maneja un mejor sistema para ensenar código, el lo único que hace es escribir y no explica los conceptos en si de donde salen, no se sabe explicar bien, puede que el profesor sepa mucho pero si no sabe explicarse nada que hacer, somo muchos los estudiantes que estamos confundidos, y me parece que ir a buscar todo un dia información sobre las promesas no es lo mas practico dado que uno esta pagando un curso es para que le ayuden con los conocimientos.

Victor Alfonso Caballero Cabrera

student•

Vengo del futuro #okno , se ve complejo pero después de este video haciendo lo mismo con Async-Await es super legible, pero esta bueno para saber como trabaja esto.

Luis Elizalde

student•

Creo que nos puede llegar a costar entender por dos razones:

1. Conceptos nuevos son abordados.
2. Codeamos mientras vemos y escuchamos el video.

Si bien es importante practicar, cuando vemos el video y codeamos simultáneamente a veces esto no nos permite entender. Estamos concentrados en escribir bien el código para llegar al mismo resultado que el maestro.

Comparto dos consejos.

Leer más sobre promesas. Este ejemplo de MDN me ayudó a comprender un poco más el tema de las promesas. Cada paso está comentado y es muy similar a este ejercicio.
Repetir el video anterior “callback a un servidor externo” y éste de promesas una y otra vez. Verlos y escucharlos detenidamente. No hay nada que perder. Él código ya lo tendremos escrito y funcionando ya sólo queda comprender porqué.

¡Ánimo! No siempre aprenderemos todo a la primera.

Gary David Guzman Muñoz

student•

Buen consejo, aporto a la idea de ver y entender, luego codear y aprender de los errores, luego ayudarse con los aportes de los comentarios, que muy amables dejan su código bien comentado.

Yadiel Vélez

student•

Este es de los temas que más me costó entender, pero acá les dejo un ejemplo que hice con una sintaxis fácil de entender.

const prometoLimpiarMihabitacion = new Promise(function(resolve, reject){

         // Limpiando mi habitación
         
    let estaLimpia = true;
    if (estaLimpia) {
      resolve('sí');
    } else {
      reject('no');
    }
});

prometoLimpiarMihabitacion.then(function(argumento){
  console.log(`La habitación ${argumento} está limpia`);
}).catch(function(argumento){
  console.log(`La habitación ${argumento} está limpia`);
})

// CONSOLA:    La habitación sí está limpia

Johan Alejandro Lopez Arias Alejandro Lopez Arias

student•

Es un buen ejemplo, dedito arriba para que lo vean mas

Jesus Sandrea

student•

Aquí dejo estos 2 enlaces donde pueden leer un poco mas sobre esto:

Jordi Santamaría Portolés

student•

Si a la gente le costo bastante entenderlo, es que lo ha explicado fatal xD, las cosas pueden ser mas complejas o mas simples, pero si algo es complejo, la cosa es dar un ejemplo mas sencillo y luego ya puedes mostrar algo mas complejo para demostrar el potencial que puede dar eso.

Una promesa, en el fondo es algo muy simple, es un objeto que como parametro recibe una funcion con 2 callbacks (resolve, reject), al terminar de ejecutar con exito, devuelves algun valor que luego podras capturar con .then, llamando a resolve(valor), lo mismo el error devuelves algo con reject(‘error’) que se captura con .catch.
Entonces:
promise.then( (valor) => { } ) es una funcion que se ejecuta cuando termine de ejecutarse la promesa y se haya llamado a resolve(), cogiendo como parametro lo k devuelve resolve.
promise.catch( (error) => { } ) lo mismo para capturar errores.

José Gutiérrez

student•

Gracias, mucho mas claro, lo otro es que en los vídeos anteriores el muestra la manera mas engorrosa de hacerlo, para luego explicarte la mejor manera de evitarlo en este vídeo.

Carlos Eduardo Garcia Tejeda

student•

Si a alguien le sirve, les dejo mi aporte un poco mas comentado

/*
Las Promesas son objetos y están asociadas con alguna tarea asincrónica.

Fue una forma introducida en ES 2015 para peticiones asincronas sin generar callback hell

Existen tres estados internos de las Promesas:

Pending
Fullfiled
Rejected

El constructor Promise tiene dos parámetros:

const promise = new Promise(function (resolve, reject) { 
	// aqui se debe de hacer algo con resolve y reject
)}
y cada parametro son funciones dependiendo de lo que haya sucedido en la tarea
*/
/*
	En el siguiente ejemplo se muestra una petición a un servidor externo usando promesas
*/
const get = URL => {
    return new Promise((exito, fallo) => {
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            const DONE = 4;
            const OK = 200;
            if (this.readyState === DONE) {
                if (this.status === OK) {
                    //Todo OK
                    exito(JSON.parse(this.responseText));
                } else {
                    //Hubo un error
                    fallo(new Error(`Se produjo un error al realizar el request ${this.status}`));
                }
            }
        }
        xhr.open('GET', URL);
        xhr.send(null);
    });
};
/* Funcion para tratar el error */
const handleError = err => console.log(`Request failed: ${err}`);
/*
	Ejecución usando el metodo get creado anteriormente
	Cuando se retorna una promesa y termina su ejecución se puede ejecutar un then para continuar 
	o un catch si retorna un error para ambos metodos retorna una respuesta (si es exitoso en el then)
	o un error si falló en el catch
*/
let personaje = null;
get('https://www.swapi.co/api/people/1/').then(respuestapeticion1 => {
    personaje = respuestapeticion1.name; //se almacena el valor para proximo uso
    return get(respuestapeticion1.homeworld); //promesa que se realiza para traer el otro valor
}).then(respuestapeticion2 => {
    //Este then se llama ya que se retorno una promesa en el anterior y se puede estar anidando
    console.log(`${personaje} nació en ${respuestapeticion2.name}`);
}).catch(err => handleError(err)); //el catch para tratar si se llega a tener algún error
/*
	Ejecución usando el metodo fetch:
	https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
	que retorna un promesa para resolver una respuesta (objeto Response)
*/
fetch('https://www.swapi.co/api/people/1/').then(respuesta => respuesta.json()).then((respuestapeticion1) => {
    personaje = respuestapeticion1.name; //se almacena el valor para proximo uso
    return fetch(respuestapeticion1.homeworld); //promesa que se realiza para traer el otro valor
}).then(respuesta => respuesta.json()).then((respuestapeticion2) => {
    //Este then se llama ya que se retorno una promesa en el anterior y se puede estar anidando
    console.log(`${personaje} nació en ${respuestapeticion2.name}`);
}).catch((err) => handleError(err)); //el catch para tratar si se llega a tener algún error

Bernardino Villagra Baez

student•

No entendí nada. Me perdí

Vicente

student•

Es muy facil tener un servidor para hacer este tipo de pruebas.
Se instala con: npm install -g serve
Para utilizarlo, apuntar una terminal al directorio cuyos ficheros queremos servir y escribir: serve

Por defecto sirve el index.html del directorio pero si no lo hay en el primer nivel de archivos, presenta todos los archvivos y carpetas para poder navegar y elegir el fichero que queremos servir.

Saludos
Vicent

Vicente

student•

Funciona por defecto en localhost: 3000 pero podemos cambiar el puerto arrancándolo asi: por ejemplo para arrancar en el puerto 5000, sería serve -p 5000

Roberto Prince

student•

yo utilizo lite-server, es excelente

npm install lite-server

Ramiro

student•

Ejemplo en Node con fetch:

var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var fetch = require('node-fetch');

function get(URL){
	return new Promise((resolve, reject) =>{
		const xhr = new XMLHttpRequest();

		xhr.onreadystatechange = function () {
			const DONE = 4
			const OK = 200
			if(this.readyState === DONE){
				if(this.status === OK){
					//todo ok
					resolve(JSON.parse(this.responseText))
				}else {
					//hubo un error
					reject(new Error (`Se produjo un error al realizar el request: $(this.status)`))
				}
			}
		}
		xhr.open ('GET', URL);
		xhr.send(null);
		})
}

function handleError(err){
	console.log((`Request failed: ${err}`))
}

let luke
fetch('http://swapi.co/api/people/1')
	.then(response => response.json())
		.then((json) =>{
			luke=json
			return fetch(luke.homeworld)
	})
	.then(response => response.json())
	.then((json) => {
		homeworld = json
		console.log(`${luke.name} nació en ${homeworld.name}`)		
		
	})
	.catch(err => handleError(err))

Ezequiel Miguel Brandan

student•

que manera de no entender nada, mejor me dedico a vender empanadas…

Jose Manuel Montaño Saenz

student•

Vengo del futuro, entren al cap “que son y como se implementan el callbacks en…” y "eliminando el callback hell usando promesas…"
hay te explicaran de manera mas sencilla los callbacks, promesas, ejecuciones asincronas y sincronas, etc… lo recomiendo.

Ren Marc

student•

Hola Javascripters!!

Un tip que podría ayudarles a quienes tienen dificultad aquí:
Jugar un poco con la primeras lineas que sacha esquematiza que son la estructura básica del promise resolve y reject.

Una vez entendido esto, el resto es sólo un pacito más arriba.
Saludos

const promise = new Promise(function(resolve,reject){
setTimeout(resolve,5000)
})

promise.then(function(){ console.log(‘síiii’)})
.catch(function(){console.log(‘Noooo’)})

const promise = new Promise(function(resolve,reject){
setTimeout( reject(new Error(‘Error en Timeout’)),5000)
})

promise.then(function(){ console.log(‘síiii’)})
.catch(error=> console.log(error + ’ Noooo’))

Jose Enrique Marquez

student•

La corrección de este código es que no puedes tener dos constantes con el mismo nombre.

const promise = new Promise(function(resolve,reject){
setTimeout(resolve,5000)
})

promise.then(function(){ console.log(`síiii`)})
.catch(function(){console.log(`Noooo`)})

const promise2 = new Promise(function(resolve,reject){
setTimeout( reject(new Error(`Error en Timeout`)),5000)
})

promise2.then(function(){ console.log(`síiii`)})
.catch(error=> console.log(error + ` Noooo`))

Promesas

Estamos renovando el Curso de Fundamentos de Javascript

¿Dónde aprender JS actualizado?

Bases del lenguaje

Bienvenido al curso

Calcula el área de un triángulo. Creando funciones

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

Inventar un idioma manipulando strings

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

Objetos en JavaScript

Calcular la distancia entre dos puntos - Objetos en JavaScript

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Definiendo la clase Punto - Prototipos en JavaScript

Definiendo la clase Punto - Object.create en JavaScript

Definiendo la clase Punto - Class en JavaScript

Conocimientos intermedios

Entiende el scope de las variables

Operaciones con arrays

Entiende los closures de JavaScript

Estructura del lenguaje

¿Quién es this?

This, _this y los arrow functions

La función bind

call y apply

ECMAScript 5, 2015, 2016, Babel y otros cuentos

ECMAScript: El estándar en el que se basa JavaScript

Babel al rescate: logrando la compatibilidad buscada

Distintas formas de escribir módulos en JavaScript

Procesos asíncronos

No generes un cuello de botella en el EventLoop

Los callbacks de JavaScript

Callback a un servidor externo

Promesas

Async-await

Implementación de set timeout en JavaScript

Implementación de set interval en JavaScript

Cancelando el Timeout y el Timeinterval

Qué son y cómo se implementan el callbacks en JavaScript

Eliminando el callback hell usando promesas en JavaScript

Estructuras de datos y funciones avanzadas

Funciones Recursivas

Memoizacion

Iteradores en JavaScript

Generadores en JavaScript

Estructuras de Datos Inmutables en JavaScript

Creando un paquete para NPM

Requisitos Técnicos

Creando nuestro paquete

Escribiendo el código de nuestro paquete

Testeando el paquete

Publicando el paquete en NPM

Juego de HTML

¿Qué vamos a construir?

Inicializando el juego

A una ronda le sigue otra ronda

Añadir una librería

Cierre del Curso

Desafíos

Crear un modulo para convertir medidas de peso

Crear un juego en HTML, tic tac toe

Crear un tutorial