Async-await

Clase 28 de 51 • Fundamentos de JavaScript 2017

Resumen

En este vídeo vas a aprender otra forma muy actual de escribir código en JavaScript de manera asíncrona, con async-await.

Itzel

student•

que decepción este curso 😦 siento que no van poco a poco sino de pronto dan un salto enoooorme en los conocimientos

Daniel Hidalgo

student•

Lo mismo sentí 3 videos atrás. Tendré que aprender por otros medios y en otro lado.

Rodolfo Miquilarena

student•

la cosa es que se supone que ya deberias tener nociones basicas de programacion y nociones de sincronizacion antes de ver este curso.

David Santiago González Ramos

student•

Slides de Sergío Xalambri para repasar lo visto en el módulo de programación asincrona:

Async-Await:

Hosward Alfredo Villoria Camacho

student•

brutal

Sergio Andujar

student•

wow muy bueno

Marcelo Fontana

student•

async-await --> queda mucho mas claro el código!!!

Martin Paez

student•

Facilidad enormemente la lectura del codigo 🙌

Sergio Zapata Donado

student•

Para los compañeros que se encuentran un tanto perdidos (Yo también lo estaba) tengan en cuenta que algunas de las explicaciones que hace Sacha referentes a “antiguas” maneras de codificar no son necesarias que las aprendan, hay 3 vídeos con diferentes maneras y ustedes deben elegir con cual quedarse. Los programadores somos todos diferentes sin embargo no deben dejar de “leer” los códigos escritos en las distintas formas ya que seguramente se lo van a encontrar en su día a día. Y también no olviden descansar, hay un limite de cuanta información nueva se puede procesar, si ya sientes que no entiendes has una pausa, distráete y luego vuelve a ver el vídeo (Yo los repetí 2 veces y en algunos casos 3) en mi caso el Async-await ha sido la forma que pude absorber. Éxitos!

Fabricio Rodríguez Aguirre

student•

(FIREFOX ONLY) “TypeError: NetworkError when attempting to fetch resource”

Carpe diem:
Es un mensaje para el IO del futuro. En esta clase Sacha hace un despliegue de todo el arsenal nuclear que tiene JS. Utiliza Codepen como IDE, y se vale de Babel y Polyfill para apuntalar su IDE y resolver que Codepen no tiene implementado Async-await.

Cuando uso Codepen en Firefox y utilizo fetch, la solicitud falla. Mozilla menciona que el error se da por que el programa está localizado en localhost y está tratando de acceder a un recurso que no está en ** localhost**. Así mismo menciona que la solución está en un cambio en el about:config (ver URLs al pie). Dicho cambio está implementado por defecto desde la versión 50.

Por tanto, Firefox ya no presenta este inconveniente, pero Codepen aún lo mantiene! Estimo que su configuración no se actualiza con la misma frecuencia que Firefox, que no sólo ha resuelto este problema, sino que ya tiene implementado Async-await.

Sí vosotros correís el código directamente en el “Inspector” (una de las muchísimas herramientas del Desarrollador), es evidente que no necesita de Babel ni Polyfill para mostrar el mismo resultado que obtiene Sacha.

Saluti,
Fabricio

Omar Crespo

student•

No veo el alboroto por la dificultad de los ultimos videos. La programación no es para cualquiera como bien nos enseña la pelicula ratatouile “No cualquiera puede cocinar, pero un Gran chef puede venir de cualquier lado” y es que lo hermoso de la programacion es que cualquiera puede aprender a programar sin problema pero el verdadero camino del programador empieza apartir de estas clases, Procesos asincronos Procesamiento paralelo Conexion a API y esto solo un pequeño recuerdo de un dibujo hecho a mano de la foto a blanco y negro que se le tomo a 1km de distancia a la punta del iceberg. Si quieres ser parte de esta industria tienes que aprender rapido, si no eres capaz la solucion es simple ‘iterar hasta aprender’

while conocimiento.state != incompleto:
	verVideo()

	capacidadDeAprender += 0.01

Les deseo mucha suerte y esta frase esta super repetidisima pero a mi me ha acompañado en un monton de situaciones
"Keep calm and code"

Ricardo Moreno

student•

ahh ok, esteee… … … ¿ehh?

Creo que tu comentario era positivo pero no te entendí muy bien.

Pues ánimo gente, por eso la programación es bien pagada, no cualquiera se anima a aprender.

Escriban el código a consciencia y traten de hallarle la lógica, si batallan busquen otras fuentes que refuercen la información y descansen de vez en cuando.

Michael Bolaños Vargas

student•

Interesante el comportamiento del Async Await; queda mas claro en este ejemplo (Copy paste en Chrome):

async function getLuke(callNumber) {
	try {
		if(callNumber == 1) await setTimeout(null, 4000)
		const response = await fetch("http://www.swapi.co/api/people/1/")
		const luke = await response.json()
		const responseHomeworld = await fetch(luke.homeworld)
		luke.homeworld = await responseHomeworld.json()
		console.log(`Call #${callNumber} ${luke.name} nacio en ${luke.homeworld.name}`)
	} catch (err) {
		console.log(err)
	}
}
console.log("First")
getLuke(1);
getLuke(2);
getLuke(3);
console.log("Second")

Daniel Hidalgo

student•

Quedó muy bonito el código, + limpio…
pero no entendí nada desde el video “Callback a un servidor externo” hasta "Async-await"
Estos últimos videos están hechos para programadores intermedios, NO para quienes empezamos desde cero.

Diego Forero

Team Platzi•

Solo es cuestión de repasarlos y entender que hace cada cosa, no es fácil al principio pero luego que lo entiendes dices puff este es muy sencillo.

Juan José Rivera

student•

A mi me sirvió el poner toda mi atención al video primero y luego tratar de replicar los ejemplos. Algunos videos los vi más de dos veces pero al final entendí. ¡Ánimo! Cuando uno finalmente comprende se siente poderoso.

Victor Lozada

student•

Este es otro ejemplo de async y await utilizando una api diferente para recibir informacion del clima
para probarlo necesitan una llave para la api que pueden solicitar gratuitamente en

const URLAPI = 'https://api.apixu.com/v1/current.json?key=a32185bee8854f5cb66205950182705&q='
async function getCitysWeather(URL, ...citys){
    const citysList = citys
    const citysListLen = citysList.length
    for(let i = 0; i< citysListLen; i++){
        try{
            const res = await fetch(`${URL}${citysList[i]}`)
            const jsonResponse = await res.json()
            const weather = jsonResponse
            console.log(`La temperatura en : ${weather.location.name} es de ${weather.current.temp_c}`)
        }
        catch(err){
            console.log(`Hubo un error con la ciudad ${citysList[i]} : ${err}`)
        }
    }
    
}

getCitysWeather(URLAPI, "valencia", "caracas","maturin","los teques","san antonio del tachira", "la grita", "paris", "taiwan")
console.log(`esto aparece primero ya que las funciones escritas anteriormente son asincronas`)

Oscar Barajas Tavares

Team Platzi•

¡Genial!

Juan Diego Brocca

student•

Porque hay algunas videos que no suben los archivos?

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.

Sebastian Díaz

student•

La ultimas tres clases me resultaron algo confusas, considero que van algo rápidas, sin embargo busqué información por otros medios y conseguí esta web, me ayudo a entender mucho mas, espero les ayude también c:

Alexis Antonio Moraga Gallardo

student•

Wuau me enamore de async - await mucho mas sencillo y claro que los métodos anteriores

Les comparto mi repositorio en GitHub con el avance de este curso

Repositorio

en el están los ejercicios realizados en clase comentados, y mis notas personales

/*Continuando con el mismo ejemplo anterior
en esta ocacion lo realizaremos mediante ek uso de Async-Await */

function _handlerError(err){//creamos una funcion para manejar los errores
  console.log(err)
}

async function getLuke(){//declaramos una funcion asincrona usando la palabra reservada async
  try{//usamos un try catch para ejecutar este boque de codigo, y si hay un error lo capturamos en el catch

    const response = await fetch(`https://swapi.co/api/people/1`)//guardamos la promesa realizada con el metodo
//fetch en una constante llamada response, pero como esta es una promesa usamos el metodo await para esperar a que
//esta promesa se resuelva antes de guardar su valor en la constante
    const luke = await response.json()//asignamos el valor obtenido de la promesa a la constante luke, y como el valor
//obtenido es una promesaigualmente usamos await para esperar que esta se resuelva antes de asignar el valor
    const responseHomeworld = await fetch(luke.homeworld)//nuevamente guardamos la proeza realizada con fetch en una constante
//y usamos awais para esperar que esta se resuelva antes de guardar su valor
    luke.homeworld = await responseHomeworld.json()//guardamos el valor retornado en la propiedad homeworld,
//y usamos await para esperar que la promesa se resuelva
    console.log(`${luke.name} vive en  ${luke.homeworld.name}`)
//imprimimos por consola la propiedad nombre del objeto luke, y la propiedad nombre del objeto homeworld guardado en la propiedad
//homeworld del objeto luke
} catch(err){//atrapamos los errores que ocurran durante la ejecucuiion
    _handlerError(err)//llamamos a la funcion _handlerError y le pasamos los errores
  }
}

getLuke()
//llamamos a la funcion getLuke


/*
async -> define una funcion como asincrona
await -> traba el flujo de ejecucion hasta que se resuelve la promesa
*/

Andrés Madrigal

student•

Excelente ejemplo!! muchas gracias

David Hernandez Hernandez

student•

Hoy es 5 de abril del 2018 y ejecuté el código con async y await directo en mi navegador(sin usar Babel) y corre perfectamente, por lo que lo más probable es que ya sea soportado Emacscript6 en los navegadores, o al menos en la versión más reciente de Chrome.

Jose Parra

student•

Cual sería el flujo de trabajo para transpilar el código con Babel?

Tener un archivo con mi código y otro archivo con el código transpilado?

como se mantienen estos archivos a través del tiempo junto con las puestas en producción?

Gracias

Sergio Daniel Xalambrí

student•

Tener una carpeta con tu código fuente (source), esta queda en Github.
Tener otra carpeta con tu código final (built o dist), esta se ignora en Github.

Cuando hagas deploy hay dos opciones, o generas los archivos finales en tu entorno local y subís estos a producción o subís el códigos fuente y luego los generas en producción (la opción más común).

Francisco Jose

student•

Estas últimas clases son decepcionantes no hay por donde cogerlas y no quiero que me venga el listillo de turno diciendo que es culpa mía que si es mejor hacer el curso de programación básica (saque un 9 a la primera). La culpa es de Platzi han dado un salto grande y eso me da que pensar que te venden como que el curso es el mejor del mundo todo es chevere aprendes de todo un montón y esta claro que no es así. Antes de pasar a hacer este tipo de vídeos deberían de haber realizado otros con conceptos más básicos sobre los procesos síncronos, asíncronos, JSON, etc, etc. O que mínimo que se preocupen de dar otros recursos para entenderlo mejor.

Nicole Chapaval

Team Platzi•

Hola! Ya perteneces a la Escuela de JavaScript? Justamente por cosas como la que mencionas creamos un espacio para repasar conceptos, y hace poco hicimos una clase en vivo con Leonidas Esteban en la que resolvimos varias preguntas, entre ellas están algunas de las cosas que mencionas.
Si aún no haces parte confírmame y te damos acceso. No sirve de nada molestarse, siempre estamos aquí para ayudar 😃

LEON CARLOS GUTIERREZ

student•

En especial yo si entendi, y creo que es un curso excelente.
Estoy haciendo un proyecto grande y necesito lo basica porq no se javascript y este cumplio mis expectaivas.

Lester Fibla Saavedra

student•

Por si a alguien le sirve, estoy viendo este curso en julio 2018 y todas estas llamadas a la api de swapi me fallaban. Error de request, decía.
Finalmente era porque la url debía ser con SSL, o sea, hay que usar
No se si será un cambio en el sistema de ellos o alguna actualización de chrome, pero para que sepan 😄

Diego Forero

Team Platzi•

Fue un cambio en el API de ellos, solo permiten peticiones por https.

Iván Darío Sánchez Jiménez

student•

Cordial saludo compañeros

Para tener una mejor referencia en el uso de funciones asíncronas les comparto una implementación desarrollada por mi utilizando Async- Await y utilizando la API de espero les sea muy útil para sus estudios. Aplicación STARWARS

Manuel Garcia

student•

Dejo este excelente articlo de async await vs generator.

Francisco Javier Cervantes Candelario

student•

1 - Agregar el atributo image al al type CarITem en types.d.ts

2 - En el metodo de handleAddToCart en ProductViewItemsOrder.tsx

agrega tambien la propiedad de imagen y merchandiseId

Espero que te funcione, si no me cuentas, saludos

Async-await

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