notas curso: Fundamentos de JavaScript - Un saludo compañeros de Platzi
¿Quieres tener unos apuntes organizados para repasar en un futuro lo que estás aprendiendo en este curso? Práctica mucho, porque los apuntes ya los he hecho.
Introducción al curso
¡Alto! Tenemos una nueva versión de este curso para ti
Bienvenidos al Curso de Fundamentos de JavaScript
Repositorio de este curso de fundamentos de JS
Primeros pasos en JavaScript
Variables
Variables: Strings
Variables: Números
Funciones
El alcance de las funciones
Objetos
Desestructurar objetos
Parámetros como referencia o como valor
Comparaciones en JavaScript
Estructuras de Control y Funciones
Condicionales
Funciones que retornan valores
Arrow functions
Estructuras repetitivas: for
Estructuras repetitivas: while
Estructuras repetitivas: do-while
Condicional múltiple: switch
Arrays
Introducción a arrays
Filtrar un array
Transformar un array
Reducir un array a un valor
Programación Orientada a Objetos en JavaScript
Cómo funcionan las clases en JavaScript
Modificando un prototipo
El contexto de las funciones: quién es this
La verdad oculta sobre las clases en JavaScript
Clases en JavaScript
Asincronismo
Funciones como parámetros
Cómo funciona el asincronismo en JavaScript
Cómo funciona el tiempo en JavaScript
¿Qué pasó con swapi.co?
Callbacks
Haciendo múltiples requests
Manejando el Orden y el Asincronismo en JavaScript
Manejo de errores con callbacks
Promesas
Promesas Encadenadas
Múltiples promesas en paralelo
Async-await: lo último en asincronismo
Juego de HTML
Comenzando el juego
Generando una secuencia de números
Iluminando la secuencia de colores
Obteniendo el input del usuario
Agregando la verificación del color elegido
Agregando los estados finales del juego
Conclusiones del curso
Complementos
Diferencias entre var, let y const
Memoización: ahorrando cómputo
¿Hace cuántos días naciste?
Funciones recursivas
Entiende los closures de JavaScript
Estructuras de datos inmutables
Cambiando de contexto al llamar a una función
¿Cuándo hace falta poner el punto y coma al final de la línea?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Async-await es la manera más simple y clara de realizar tareas asíncronas. Await detiene la ejecución del programa hasta que todas las promesas sean resueltas. Para poder utilizar esta forma, hay que colocar async antes de la definición de la función, y encerrar el llamado a Promises.all() dentro de un bloque try … catch.
Aportes 210
Preguntas 49
notas curso: Fundamentos de JavaScript - Un saludo compañeros de Platzi
¿Quieres tener unos apuntes organizados para repasar en un futuro lo que estás aprendiendo en este curso? Práctica mucho, porque los apuntes ya los he hecho.
Resumen de la Clase
Async-await: lo último en asincronismo
Async-await es la manera más sencilla y clara de realizar tareas asíncronas.
Se parece mucho a la forma de escribir código hace unos años, de manera secuencial, desde arriba hacia abajo.
Lo que sí, incluye algunas palabras clave.
Como primer cambio a nuestro código anterior vamos a crear una función en la que incorporamos desde la declaración de la variable ‘ids’ hasta incluso el .catch.
A continuación llamamos a la función:
function obtenerPersonajes() {
var ids = []
for (let i = 1; i <= 10; i++) {
ids.push(i)
}
var promesas = ids.map( id => obtenerPersonaje(id) )
Promise
.all(promesas)
.then(personajes => console.log(personajes))
.catch(onError)
}
obtenerPersonajes()
Después de la declaración de la variable ‘promesas’ guardamos los resultados de esas promesas en una nueva variable ‘personajes’.
async function obtenerPersonajes() {
var ids = []
for (let i = 1; i <= 10; i++) {
ids.push(i)
}
var promesas = ids.map( id => obtenerPersonaje(id) )
var personajes = await Promise.all(promesas)
Notese la palabra clave ‘await’ antes de Promise.all. Esta hace que el código dentro de la función se detenga en ese lugar hasta que se concretan todas las promesas.
Para poder usarlo debemos declarar la función como ‘async’.
Para que esto funcione debemos poner este await dentro de una estructura try/catch.
function obtenerPersonajes() {
var ids = []
for (let i = 1; i <= 10; i++) {
ids.push(i)
}
var promesas = ids.map( id => obtenerPersonaje(id) )
try{
var personajes = await Promise.all(promesas)
console.log(personajes))
} catch(id) {
onError(id)
}
}
obtenerPersonajes()
Código completo:
const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id'
const opts = { crossDomain: true}
function obtenerPersonaje(id) {
return new Promise((resolve, reject) => {
const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
$__
.get(url, opts, function(data){
resolve(data)
})
.fail(() => reject(id))
})
}
function onError(id){
console.log(`ERORRRRRRR!!!!!!!!!!! No se pudo obtener el personaje con id = ${id}.`)
}
async function obtenerPersonajes() {
var ids = []
for (let i = 1; i <= 10; i++) {
ids.push(i)
}
var promesas = ids.map( id => obtenerPersonaje(id) )
try {
var personajes = await Promise.all(promesas)
console.log(personajes)
} catch (id) {
onError(id)
}
}
obtenerPersonajes()
Sin duda, hay que prácticar y leer más para entenderle mejor.
=> Async Await, forma sencilla de realizar tareas asincronas
=> Es importante pensar en arrays a la hora de usar async await
=> Asyncs await detiene la ejecucion del programa hasta que todas las promesas sean resueltas
DESAFIO PERSONAL EN MI CODIGO
mostrar los personajes en pantalla recorriendoo el array, saludando con su nombre cada uno
/*
Autor: Daniel Páez
URL Autor: Daniel Páez
Tema de la clase: Async Await
Descripción: huyendo de los callback hell, descubriendo el paraiso
URL Autor: heysoypaez.com
URL código: github.com/heysoypaez
*/
/*PROTOCOLO DE VERIFICACIÓN DE FUNCIONAMIENTO
==================================*/
//Imprimiendo algo en la consola
console.log("inicializando archivo");
/*DECLARACIÓN DE VARIABLES
==================================*/
var personajesRender = document.getElementById("output");
/* VARIABLES CONSTANTES DE API REQUERIDA
==================================*/
const API_URL = "https://swapi.co/api/";
const PEOPLE_URL = "people/:id";
const LUKE_URL = `${API_URL}${PEOPLE_URL.replace(":id","1")}`
const options = {crossDomain: true};
/*Para realizar un request siempre es necesario saber la url a la cual queremos acceder*/
/*DECLARACIÓN DE FUNCIONES
========================================================*/
//Funcion para obtener Personajes de Star Wars por su Id
function obtenerPersonaje(id) {
return new Promise( (resolve,reject) => {
/*Declaración de Variables
==============================*/
const url = `${API_URL}${PEOPLE_URL.replace(":id",id)}`
/*Declaración de Funciones
=============================*/
function successRequest(data) {
resolve(data)
}
/*Peticiones a la API
============================*/
// $ === jquery, Usamos Jquery.get para requerir datos de la API
$.get( url, options, successRequest )
//Usamos Jquery.fail para hacer algo especifico si el request falla
.fail( () => reject(id))
})
}
//Funcion para imprimir la info de los Personajes de Star Wars por su Id
function imprimirInfoPersonaje(character) {
saludo = `Hola, soy ${character.name}`
if (character.name === "Darth Vader") {
saludo += ` y soy tu padre.`
}
console.log(saludo)
//Estoy imprimiendo en el document body el mismo saludo que va a la consola
personajesRender.innerHTML += `<h4>${saludo}</h4>`
}
function alertarError(id) {
var mensajeError = `(Desarrollador backend) Malas noticias, hubo un error subiendo el personaje ${id}`;
console.error(mensajeError);
a
/*EJECUCIÓN DE FUNCIONES Y PROMESAS
========================================0*/
//funcion asincrona
async function obtenerPersonajes() {
var ids = [1,2,3,4,5,6,7];
//map tomaba un array y modificaba cada uno de sus elementos
//Ciclo para imprimir el saludo de cada personaje en el array ids llamandolo por su id
function imprimirInfoPersonajes() {
for (var i = 0; i < ids.length; i++) {
/*Variables
========= */
character = personajes[i]
saludo = `Hola padawan, soy ${character.name}`
/*Logica
========= */
if (character.name === "Darth Vader") {
saludo += ` y soy tu padre.`
}
/*Ouput
========= */
console.log(saludo)
personajesRender.innerHTML += `<h4>${saludo}</h4>`
//Estoy imprimiendo en el document body el mismo saludo que va a la consola
}
}
var promesas = ids.map( (id) => obtenerPersonaje(id) )
try {
var personajes = await Promise.all(promesas)
//cuando todas las promesas se resuelvan guardamelo aca
console.table(personajes[0]);
imprimirInfoPersonajes();
}
catch(id) {
alertarError(id);
}
//para poder usar await la funcion debe estar marcada como asincrona
}
obtenerPersonajes()
/*no todos los navegadores lo soportan
pollyfill*/
/*=======================================
RENDER EN PANTALLA
Agregando al html datos de la clase
=======================================*/
//Variables
var temaClase = "Async Await";
var titulo = document.getElementById("title")
var contenidoClase = document.getElementById("contenido-clase")
//Variables reasignadas
titulo.innerHTML= temaClase;
contenidoClase.innerHTML= temaClase;
//contenido de la clase
var apuntes = document.getElementById("apuntes")
//apuntes.innerHTML = `${textoContenido}`;
Comparto un post que explica un poco más de promesas y async await. Espero les guste y puedan dejar feedback!
El mismo ejemplo con async
No me queda del todo claro la ventaja de Async-await sobre las Promesas en paralelo que se usamos antes. Voy a leer un poco mas pero si alguien puede aclarar el tema, seria muy bueno. Saludos
const URL_API = 'https://swapi.co/api'
const opciones = { crossDomain: true };
const urlPersona = (id) => `${URL_API}/people/${id}`
const obtenerPersonaje = id =>
fetch(urlPersona(id), opciones)
.then(res => res.json())
const obtenerPersonajes = async () => {
let promesas = []
try {
for (let i = 1; i <= 7; i++) {
promesas.push(obtenerPersonaje(i))
}
let respuesta = await Promise.all(promesas)
console.log(respuesta)
} catch (error) {
console.log(error)
}
}
obtenerPersonajes()
const URL_API = 'https://swapi.co/api/';
const URL_PEOPLE = 'people/:id';
const OPTIONS = { crossDomain: true };
function personaje(id) {
return new Promise((resolve, reject) =>{
const url = `${URL_API}${URL_PEOPLE.replace(':id', id)}`
$
.get(url, OPTIONS, (data)=>{
resolve(data)
})
.fail(() => reject(id))
})
}
function onError(id){
console.log(`Sucedio un error, no se pudo obtener el parametro ${id}`)
}
async function obtenerPersonajes(){
const ids = []
for (let i = 1; i <= 7; i++) {
ids.push(i)
}
let promesas = ids.map(id => personaje(id))
try {
let personajes = await Promise.all(promesas)
console.log(personajes)
} catch(id) {
onError(id)
}
}
obtenerPersonajes()
Mis Apuntes:
//Para hacer request necesitamos saber url en una constante
const API_URL = 'https://swapi.dev/api/';
//Poner la parte de las personas (parte que varia) en otra constante
const PEOPLE_URL = 'people/:id/';
const opts = { crossDomain: true};
function obtenerPersonaje_v2(id){
return new Promise ( (resolve, reject) => {
const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`;
$.get(url,opts,function(data) {
resolve(data)
})
.fail(() => reject(id))
})
};
function onError(id){
console.log(`Sucedio un error al obtener el nombre del personaje ${id}`);
}
//Para poder usar await la funcion tiene que empezar por "async"
async function obtenerPersonajes(){
var ids = [1,2,3,4,5,6,7];
var promesas = ids.map(id => obtenerPersonaje_v2(id));
//variable para asignar el valor de una tarea asincrona
//cuando todas las promesas se resuelvan, ese resultado guardarlo en "personaje"
// detener la ejecucion hasta que todas las promesas se resuelva
// recien ahi se va a guardar en personajes
// /
// await
// para poder usarlo ponerlo dentro de un bloque try catch
try {
var personaje = await Promise.all(promesas);
console.log(personaje);
} catch (id) {
onError(id);
}
}
obtenerPersonajes();
y no vamos a ver fetch???
Un pequeño aporte, lo hice un poco más automático (:
async function getCharacter2() {
var ids = [1, 2, 3, 4, 5, 6, 7]
var promesas = ids.map(id => getCharacter(id))
try {
var personajes = await Promise.all(promesas)
ids.forEach(id => {
console.log(`Hola soy el personaje No. ${id} y me llamo ${personajes[id - 1].name}`)
});
} catch (id) {
onError(id)
}
}
getCharacter2()
Me confundió el llamar obtenerPersonaje y obtenerPersonajes por esa sutil diferencia y estuve un rato buscando el error que cometí.
const API_URL = 'https://swapi.dev/api/';
const PEOPLE_ID = 'people/:id';
let cantp = Number(prompt("¿Cuantos personajes deseas que carguemos?"));
const opst = { crossDomain: true };
let ids = [];
function obtenerPersonaje(id){
//asi se declara una promesa
return new Promise (function(resolve,reject){
const URL_completa = `${API_URL}${PEOPLE_ID.replace(":id",id)}`;
//conectamos con jquery
$
.get(URL_completa, opst, function(data){
//solo se resuelve si la function del get es satisfactoria
resolve(data);
})
.fail(() => reject(id));
})
}
//funcion asincrona
async function obtenerPersonajesAsync(){
//creo un ciclo for para obtener la cantidad de personajes solicitada al usuario
for (i=1; i<=cantp; i++){
//armo el array de ids
ids.push(i);
}
//genero un nuevo array de promesas con los ids
var promesas = ids.map(id => obtenerPersonaje(id))
//bloque de validacion de errores try and catch
try{
//variable que almacenara los resultados de todas las promesas despues de ejecutadas
let personaje = await Promise.all(promesas);
//recorro nuevo array para imprimir
for (i=0; i<personaje.length; i++){
console.log(`El personaje ${i+1} se llama ${personaje[i].name}`);
}
}catch(id){
console.log(`No pudimos encontrar el personaje con id ${id}`);
}
}
obtenerPersonajesAsync();
El uso del try es para evitar errores inesperados y que nuestra aplicacion se rompa en produccion, no es obligatorio utilizarlo pero si es bueno aplicarlo si queremos una aplicacion con mas calidad de cara al usuario final.
A este punto, se siente un poco más de complejidad en las clases, sin embargo traigo la confianza en que gradualmente lo iré entendiendo mejor y asimilarlo más fácil con la práctica.
Hola Platzi Nauta ! 😄
si has llegado y no quieres quedar con ninguna duda sobre las promesas, te invito a ver este tutorial que he preparado para ti https://platzi.com/tutoriales/1339-fundamentos-javascript/4308-entendiendolo-todo-reguests-y-promesas/
Impresionante!!!
Mi cara cuando aprendo cosas nuevas de Javascript en el curso (y eso que es BÁSICO) 😮
coidgo async-await
const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id'
const opts = {crossDomain:true}
function obtenerPersonaje(id){
return new Promise((resolve,reject) => {
const url= `${API_URL}${PEOPLE_URL.replace(':id',id)}`
$
.get(url,opts,function(data){
resolve(data)
})
.fail(() => reject(id))
})
}
function onError(id){
console.log(`Error al obtener el personaje ${id}`)
}
async function obtenerPersonajes(){
var ids = [1,2,3,4,5,6,7]
var promesas = ids.map(id => obtenerPersonaje(id) )
try{
var personajes = await Promise.all(promesas)
console.log(personajes)
}catch(id){
onError(id)
}
}
obtenerPersonajes();
Gente, tienen a mano buenas API's para consultar?
Está de leer más para entender mejor u-u
function obtenerPersonaje(id) {
return new Promise( (resolve, reject ) => {
const URL_PERSONAJE = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
$.get(URL_PERSONAJE, opts, function (data) {
resolve(data)
})
.fail(() => reject(id))
})
}
const onError = (id) => console.log(`Lo sentimos no se pudo leer el ${id}`)
//Async antes de la funcion
async function obtenerPersonajes() {
var ids = [1, 2, 3, 4, 5, 6, 7]
var promesas = ids.map(id => obtenerPersonaje(id))
//Hasta que todas las promesas sean resueltas guardalo aquí
//Para poder utilizarlo debe de ir en un try catch
try {
var personajes = await Promise.all(promesas)
console.log(personajes)
} catch (id) {
onError(id)
}
}
obtenerPersonajes()
Ejemplo con promises usando setTimeout
Estos son mis apuntes, no sé si están del todo correctos. Me gustaría que ayuden a mejorarlos. Gracias!
PASO 1:
Hay grandes similitudes de este ejercicio con el anterior. Creamos un array de IDs, a partir de ese array cremos otro array (promesasArray) tras la ejeución de la función "obtenerPersonaje(x)" usando como parámetro el valor de cada elemento del array IDs.
PASO 2:
Sin embargo, la diferencia principal es el uso de ASYNC-AWAIT.
ASYNC se coloca delante de function, para indicar que se trata de una función asíncrona, es decir, que depende de la respuesta de un servidor, de manera que las respuestas del server puede no estar sincronizado con lo que espera JS.
PASO 3:
Posteriormente usamos un bloque TRY-CATCH para ejecutar un console log en función de si la promesa se reolvió con éxito o no.
Si la promesa se resolvió con éxito usaremos TRY. Si provamos el TRY y este no tiene datos, significa que la promesa no tuvo éxito, entonces pasamos al CATCH para ejecutar la función onERROR.
PASO 4:
Como la resolución de las promesas es un proceso asíncrono, que depende del server usamos la palabra AWAIT = "a la espera", para indicar que hasta que no se resuelvan todas no se procederá a guardar la data de esas promesas dentro de la variable "personajES".
PASO 5:
Una vez guardado en "personajES" el array generado por Promise.all. TRY, evaluará todos los elementos. Si hay algún error, es decir, una promesa no se ha resuelto con éxito, pasaremos al catch, pasando como parámetro el id de la función "reject".
Es por eso, que cuando llega al ID: 17 no se muestra el Array de la data obtenida.
Hay un curso de Platzi que profundiza mucho este tema https://platzi.com/clases/asincronismo-js/
Otro detallito más:
Los comentarios los coloco en otro lado, como si la pagina no actualizara la section de los comentarios.
¿Les paso a ustedes o solo a mi?
…crazy e!
Creo que algo muy importante que falta es FETCH ya que si estamos viendo vanilla el uso de jQuery no debería de seguir(al menos en este curso)
¿Cuál es mejor en tiempo de ejecución? ¿Async-await o Promise.all?
He estado usando Firefox y no me ha presentado problemas
const API_URL = 'https://pokeapi.co/api/v2/';
const PEOPLE_URL = 'pokemon/:id';
const options = { crossDomain: true }
function obtenerCriatura(id) {
return new Promise((resolve, reject) => {
const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
$.get(url, options, function(data) {
resolve(data);
})
.fail(() => reject(id))
})
}
function onError(id) {
console.log(`Sucedio un error al obtener el personaje ${id}`);
}
async function obtenerCriaturas(){
var ids = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
var promesas = ids.map(id => obtenerCriatura(id));
try {
var pokemones = await Promise.all(promesas)
console.log(pokemones)
} catch(id) {
onError(id)
}
}
obtenerCriaturas()
const API_URL = 'https://swapi.dev/api/'
const PEOPLE_URL = 'people/:id'
const opts = { crossDomain: true }
function obtenerPersonaje(id) {
return new Promise((resolve, reject) => {
const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
$
.get(url, opts, function (data) {
resolve(data)
})
.fail(() => reject(id))
})
}
function onError(id) {
console.log(`Sucedio un error al obtener el personaje ${id}`)
}
function mostrarPersonaje(personajes) {
for(let personaje of personajes){
console.log(`Hola, yo soy ${personaje.name}`)
}
}
async function obtenerPersonajes() {
var ids = [1, 2, 3, 4, 5, 6, 7,8,9,10,11]
var promesas = ids.map(id => obtenerPersonaje(id))
try {
var personajes = await Promise.all(promesas)
console.log(mostrarPersonaje(personajes))
} catch (id) {
onError()
}
}
obtenerPersonajes()
Con el ejercicio anterior haremos los siguientes cambios
var personajes = await Promise.all(promises);
async function obtenerPersonajes() {
try {
var personajes = await Promise.all(promesas);
console.log(personajes);
} catch (id) {
onError(id);
}
Otra forma de hacer estas tareas asincronas.
async function obtenerPersonajes() {
var ids = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var promesas = ids.map(id => obtenerPersonaje(id))
try {
var personajes = await Promise.all(promesas)
console.log(personajes)
} catch(id) {
onError(id)
}
}
obtenerPersonajes()
No sé, como que las promesas encadenadas de la clase anterior me pareció una manera más clara e igual de larga de llegar al resultadi. ¿Es en verdad más práctico y simple el Async - await?
Hay un nuevo comportamiento con async await:
Podemos usar await
sin necesidad de async
Anteriormente el siguiente código marcaba un error:
await Promise.resolve(console.log('🎉'));
Por favor lee la documentación oficial para que sepas la importancia de este cambio.
Nota: Recuerda que Chrome y Node funciona bajo el motor V8, por lo que si no te funciona esta sintaxis… trata de actualizarlos.
Aquí la documentación oficial: Top Level Async
Puedo utilizar async/await en un prototipo de tipo clase? Es decir:
class MiClase {
async miMetodo() {
const response = await miPromesa
}
}
Es posible lo anterior o aplica exclusivamente para funciones ‘normales y arrow’ ?
Con async / await se simplifica el uso de las promesas y la asincronía, haciendo que sea más sencillo de leer el código.
Con await la función async se pausa, se espera a que termine la Promise pasada y luego se reanuda la ejecución de esta función.
Al utilizar async await, debemos usar un try / catch para el manejo de errores
He puesto el codigo para que me de los personajes con un for para no declararlos en el array manualmente
const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id'
const opts = {crossDomain: true}
function obtenerPersonaje(id){
return new Promise((resolve, reject) => {
const url = `${API_URL}${PEOPLE_URL.replace(':id',id)}`
$
.get(url, opts, function(data){
resolve(data)
})
.fail(() => reject(id))
})
}
function onError(id){
console.log(`Sucedio un error. No se obtuvo el parametro ID`)
}
async function obtenerPersonajes(){
var personajeCantidad = 101
var ids = [] //= [1, 2, 3, 4, 5, 6, 7]
for (var i=1;i<personajeCantidad;i++){
ids [i] = i
}
var promesas = ids.map(id => obtenerPersonaje(id))
try {
var personajes = await Promise.all(promesas)
console.log(personajes)
}
catch (id){
onError
}
}
obtenerPersonajes()```
Excelente clase, comparto mis notas
/*vamos a utilizar Async-await para simplificar el manejo de tareas asincronas. Await va a detener la ejecucion
del codigo hasta que todas las promesas que solicitemos sean resueltas.
Para poder usarlo, tenemos que colocar async antes de declarar la funcion, y encerrar el llamado a
Promises.all() dentro de un bloque try catch.*/
const API_URL = 'https://rickandmortyapi.com/api';
const PEOPLE_URL = 'character/:id';
const opts = '{crossDomain:true}';
//en la funcion que obtiene los datos, vamos a retornar una nueva promesa, a la que pasamos dos funciones
//como parametros: resolve y reject
function obtainCharacter(id) {
return new Promise((resolve,reject)=> {
const url = `${API_URL}/${PEOPLE_URL.replace(":id",id)}`;
$.get(url,opts,function(character) {
resolve(character);
})
//si el .get falla, llamamos al .fail para que rechace la promesa con el ID que no se resolvio
.fail(()=>reject(id));
})}
//declaramos la funcion onError para el manejo de errores
function onError(id){
console.log(`No se pudo obtener el personaje id: ${id}`);
}
async function obtainCharacters(){
//vamos a guardar en un array los personajes que queremos traer
var ids = [1,2,3,4,5]
var promesas = ids.map(id => obtainCharacter(id));
try { //encerramos la peticion en un bloque try/catch
var characters = await Promise.all(promesas) //usamos await para que los datos no se guarden en character hasta que no se terminen todas las promesas
for (let i = 0; i < promesas.length; i++) {
console.log(`${characters[i].name}`);
document.write(`<img src="${characters[i].image}">`);
}
} catch(id){//capturamos el posible error y se lo pasamos a la funcion onError
onError(id)
}
}
//ahora debemos llamar a la funcion obtainCharacters()
obtainCharacters();```
Super especial este contenido de Async await, muy útil
Tengo que verlo de nuevo y leer un poco más sobr este tema!
Todos los navegadores lo soportan ahora 😄
Apuntes de la clase
/*
Async-await es la manera más simple y clara de realizar tareas asíncronas.
Await detiene la ejecución del programa hasta que todas las promesas sean resueltas.
Para poder utilizar esta forma, hay que colocar async antes de la definición de la función,
y encerrar el llamado a Promises.all() dentro de un bloque try … catch.
*/
//Variables constantes que hacen referencias a las strings de trabajo
const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id'
//Le indica a la librería que el request se hará a otra página web
const opts = { crossDomain: true }
//Se modifico función de clase anterior para manejar promesas
function obtenerPersonaje(id) {
//Se deben enviar funciones en el constructor de las Promesas las funciones que manejaran los estados de la misma
//En este caso resolve y reject
return new Promise((resolve, reject) => {
const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
$
.get(url, opts, function (data) {
resolve(data)
})
.fail(() => reject(id))
})
}
//Función ejecutada si se detecta una promesa en estado rejected o rechazada
function onError(id) {
console.log(`No se pudo obtener respuesta para personaje ${id}`)
}
async function obtenerPersonajes() {
//Arreglo con los ids de personajes deseados
var ids = [1, 2, 3, 4, 5, 6, 7]
//Si se espera un return, no es necesario escribirlo usando arrow functions
//En está línea el método map de los arreglos, crea un nuevo arreglo a partir del existente,
// enviando como parámetro de la función cada uno de los id contenidos en el arreglo original.
var promesas = ids.map(id => obtenerPersonaje(id))
//Se debe colocar la sección asíncrona de la función en un bloque Try/Catch
try {
//Línea que se ejecutará de forma asincrona, la palabra reservada await, detiene la ejecución del código
//esto hace que el código no siga hasta que todas las promesas sean resueltan y se debe usar la palabra async
//antes de la palabra function al declarar la función
var personajes = await Promise.all(promesas)
//impresión de los personajes
console.log(personajes)
} catch (id) {
onError(id)
}
}
obtenerPersonajes()
Para compartir, en la nueva funcion pase por alto cambiar el nombre a obtenerPersonajes y deje el mismo en donde se resuelve la promesa obtenerPersonaje, conclusión: puse a volar mi navegador xD, se quedo procesando por mucho tiempo y me toco matar el proceso jajajaja
const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id'
const OPTS = { crossDomain: true }
//ASYNCA AWAY
function obtenerPersonaje(id)
{
return new Promise((resolve, rejected) => {
const URL = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
$
.get(URL, OPTS, function(data){
resolve(data)
})
.fail(() => rejected(id))
})
}
function onError(id) {
console.log(`Sucedio un error al obtener el personaje ${id}`)
}
//ejemplo de funcion async-await
async function obtenerPersonajes()
{
var ids = [1,2,3,4,5,6,7]
var promesas = ids.map(id => obtenerPersonaje(id))
try {
var personajes = await Promise.all(promesas)
console.log(personajes)
}
catch (id)
{
onError(id)
}
}
obtenerPersonajes()
const API_URL = 'https://swapi.dev/api/'
const PEOPLE_URL = 'people/:id'
const OPTIONS = { crossDomain: true }
function obtenerPersonaje (id) {
// creacion de la promesa
return new Promise ((resolve, reject) => {
//creacion de la URl
const URL = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
$
.get(URL, OPTIONS, function(data) {
resolve(data)
})
.fail(() => reject(id))
})
}
//Creacion de una funcion de errores
const onError = (id) => console.table(`Ocurrio un error y no se pudo obtener al personaje ${id}`);
async function parsePeople() {
var ids = [1, 2, 3, 4, 5, 6, 7]
var promesas = ids.map(id => obtenerPersonaje(id))
try {
var personajes = await Promise.all(promesas)
console.table(personajes)
} catch (id) {
onError(id)
}
}
parsePeople()
En clases anteriores [1] [2] enseñé el código que hice para también obtener los datos de las urls que están dentro de los personajes. Acá se me hizo difícil tener los mismos resultados de manera ordenada con promesas, pero pude averiguarlo.
const URL_SWAPI = 'https://swapi.dev/api/'
const URL_PEOPLE = 'people/id'
const personaHablar = id =>
{
return new Promise((resolve, reject)=>
{
let person_url = `${URL_SWAPI}${URL_PEOPLE.replace('id',id)}`
$
.get(person_url,{ crossDomain : true }, data=>resolve(data))
.fail(()=>reject(id))
})
}
async function obtenerPersonajes()
{
var ids = [1,2,3,4,10,10,10,10]
var promesas = ids.map(id=>personaHablar(id))
try
{
var personajes = await Promise.all(promesas)
obtenerDatosTotales(personajes)
} catch (error) {
console.log('Error con personaje ' + error)
}
}
function homeworldData(person)
{
return new Promise((resolve, reject)=>{
let planet_url = person.homeworld
$.
get(planet_url, { crossDomain : true }, planet=>resolve(planet))
.fail(()=>reject(person.name))
})
}
async function obtenerDatosTotales(personajes)
{
var worldData = personajes.map(persona=>homeworldData(persona))
try {
var totalWorldData = await Promise.all(worldData)
for (let i = 0; i < personajes.length; i++) {
mensaje(personajes[i], totalWorldData[i])
}
} catch (error) {
console.log(`Ups! Parece que ocurrió un error con ${error}`)
}
}
function mensaje(person, planet) {
console.log(`Hola, soy ${person.name} y nací en ${planet.name}.
Su población es de ${planet.population != 'unknown'?planet.population:'no se sabe cuantos'} habitantes.`)
}
obtenerPersonajes()
¡Cualquier duda/aporte ya saben qué hacer!
const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id'
//request jquery
opts= {crossDomain: true}
// callback
function obtenerPersonaje(id) {
return new Promise((resolve, reject) => {
const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
$.get(url, opts, function(data) {
resolve(data)
})
.fail(() => reject(id))
})
}
function onError(id) {
console.log(`Sucedio un error al obtener el personaje ${id}`)
}
var ids = [1, 2, 3, 4, 5, 6, 7]
var promesas = ids.map((id) => obtenerPersonaje(id))
Promise
// metodo al que se le pasa un array de promesas
.all(promesas)
.then(personajes => {
for (var i = 0; i < personajes.length; i++) {
console.log(`El personaje ${window.ids[i]} es ${personajes[i].name}`)
}
})
// el catch onError sucedera si cualquiera falla
.catch(onError)
<code>
🥰Resumen clase 35
//await: ejemplo (var personajes = await Promise.all(promesas))
//para poder usar un AWAIT necesitamos que la funcion que lo contiene sea asincrona
//(ASYNC FUNCTION)
//toda la parte asincrona se pone en un bloque TRY CATCH
//try {
// var personajes = await Promise.all(promesas)
// console.log(personajes)
//} catch (id) {
// onError(id)
//}
const API_URL = 'https://swapi.dev/api/'
const PEOPLE_URL = 'people/:id’
const opts = { crossDomain: true }
function obtenerPersonaje(id) {
return new Promise((resolve, reject) => {
const url = ${API_URL}${PEOPLE_URL.replace(':id', id)}
$
.get(url, opts, function (data) {
resolve(data)
})
.fail(() => reject(id))
})
}
function onError(id) {
console.log(Sucedio un error al obtener el personaje ${id}
)
}
async function obtenerPersonajes() {
var ids = [1, 2, 3, 4, 5, 6, 7]
var promesas = ids.map(id => obtenerPersonaje(id))
try {
var personajes = await Promise.all(promesas)
console.log(personajes)
} catch (id) {
onError(id)
}
}
obtenerPersonajes()
Buenas clases
Buenas tardes, cómo estan?
Acá me surge la misma inquietud que en la clase pasada… veo que acá con este proceso se genera un arreglo ya más organizado, sin embargo, me pasa lo mismo… ¿Cómo puedo acceder a el luego para proyectar los datos de los personajes? segun he entendido en el curso, esa variable que tiene los personajes no queda en el contexto global sino en el de la función… ¿qué se puede hacer en ese caso?
Tal cual como en .NET 😃
¿Entonces, Async Await sigue ejecutando codigo en la pila de ejecucion principal de javascript meintras espera que las promesas sean resueltas?
Probé colocar un simple alert() despues del bloque de codigo con las promesas y se ejecutó primero 😮
¿Cúal es la diferencia de usar el async-await y hacerlo de la manera que hicimos la clase pasada? en los dos casos me da un arreglo ordenado.
Por si alguien quiere la sintaxis en arrow function :
let obtenerPersonajePromesas = async () => {
let idPersonajes = [ 1,2,3,4,5,6,7];
let promesas = idPersonajes.map( (idPersonaje) => obtenerPersonaje(idPersonaje))
try {
let personajes = await Promise.all(promesas);
console.log('Personajes: ', personajes);
} catch (idPersonaje) {
onError(idPersonaje);
}
}
Hola, una pregunta. ¿Usando este método, .them es reemplazado por ¨try¨?
Asyn-Await es mucho mas claro
Lo realicé de esta manera para obtener sólo los nombres de todos los personajes que nos retornan las promesas
const API ='https://swapi.dev/api/'
const PEOPLE_URL ="people/:id"
const opts ={ crossDomain: true}
function getCharacter(id){
return new Promise((resolve,rejected)=>{
const url = `${API}${PEOPLE_URL.replace(':id',id)}`
$.get(url,opts,function(character){
resolve(character)
})
.fail(()=>rejected(id))
})
}
async function getCharacters(){
var ids =[1,2,3,4,5,6,7]
var promesas = ids.map(id=>getCharacter(id))
try{
var character = await Promise.all(promesas)
for (let i =0;i<promesas.length;i++)
console.log("Hola, yo soy "+ character[i].name)
}catch (id){
console.log (`Sucedio un error al obtener el personaje ${id}`)
}
}
getCharacters()
Se puede insertar un async y un array function?. O necesariamente tiene que ser “async function …”?
Se me fue un tanto difícil pero seguro con la practica mejoramos!
Aqui mi ejemplo de como usar los eventos y el asincronismo
const URL_PEOPLE ='https://swapi.co/api/people/:id';
const p1 = document.getElementById('personaje1')
const getApi = (id) => new Promise((resolve, reject) => {
fetch(`${URL_PEOPLE.replace(':id', id)}`)
.then((personajes) => resolve(personajes.json()))
.catch(() => reject(id))
}); //fin de la constante getApi
const error_catch = (id) => console.log(`Se produjo un error al obtener el personaje: ${id}`)
async function obtenerData(){
//array para llamar los datos de la API externa
var idArray = [1, 2, 3, 4, 5, 6, 7];
//aqui se guardaran las promesas qu se hagan al servidor
var promesas = idArray.map(id => getApi(id))
try {
var personajes = await Promise.all(promesas)
console.log(personajes)
p1.innerHTML = personajes[0].name
} catch (id) {
error_catch(id)
}
}
function onError(id){
console.log(`hocurrio un error con el ${id}`)
}
async function obtenerPersonajes(){
var ids = [1,2,3,4,5,6,7,8,9,10]
var promesas = ids.map(id => obtenerPersonaje(id))
try{
var personajes = await Promise.all(promesas)
console.log(personajes)
} catch(id){
onError(id)
}
}
obtenerPersonajes()
Dejo mi código de referencia para entender el sentido de new Promise sin usar jQuery
const URL ='https://swapi.co/api/people/:id';
function obtenerPersonajeid(ids){
let id = ids;
return new Promise((resolve, reject) => {
fetch(`${URL.replace(':id', id)}`)
.then( response => resolve(response.json()))
.catch(err => {
var error = `${err} Reference id #${id}`;
reject(error);
})
})
}
async function obtenerPersonajes(){
const PERSONAJES = document.getElementById("demo");
var ids = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
var promesas = ids.map(ids => obtenerPersonajeid(ids));
try {
var Personaje = await Promise.all( promesas )
Personaje.forEach( (personaje, index) => {
PERSONAJES.innerHTML += `EL PERSONAJE ${index + 1} ES: <strong> ${personaje.name.toUpperCase()} </strong><br/>`;
console.log(`EL PERSONAJE ${index + 1} ES: ${personaje.name}`);
})
}catch (error){
console.log(`HA OCURRIDO UN ERROR -> ${error}`);
}
}
Async-await se utiliza para tareas grandes
const API_URL = 'https://swapi.dev/api/'
const PEOPLE_URL = 'people/:id/'
//URL completo, en este caso tenemos que encadenar API_URL con PEOPLE_URL y a esta segunda reemplazar el :id por el id de cada personaje.
const URL = `${API_URL}${PEOPLE_URL.replace(':id',1)}`
//Este es un objeto que le indica al método si el callback es local o remoto.
const opts = { crossDomain: true }
//LA UNICA MANERA DE TENER EL ORDEN ES HACERLO A LO LARGO DEL PROGRAMA
/*Creamos una funcion para obtener varios personajes mediante el ID
- Modificaremos esta función obtenerPersonajes para que me retorne una promesa en vez que reciba un callback como paramatro, ya no va a recibir un callback si no que directamente va a retornar una promesa
-PROMESAS ENCADENADAS*/
function obtenerPersonajes(id){
return new Promise((resolve, reject) => {
const urlCharacter = `${API_URL}${PEOPLE_URL.replace(':id',id)}`
$
.get(urlCharacter, opts, (data) => {
resolve(data)
})
.fail(() => reject(id))
})
}
function onError(id) {
console.log(`Sucedio un error al obtener el personaje ${id}`)
}
/*Async-await*/
async function obtenerPersonajesFUNCION () {
var ids = [1, 2, 3, 4, 5 , 6, 7]
var promesas = ids.map(id => obtenerPersonajes(id))
try{
var personajes = await Promise.all(promesas)
console.table(personajes)
} catch (id){
onError(id)
}
}
obtenerPersonajesFUNCION()
el try reemplaza al then y el catch es el mismo?
Muy importante
const API_URL = 'https://swapi.dev/api/'
const PEOPLE_URL = 'people/:id'
const OPTIONS = {crossDomain: true}
function obtenerPersonaje (id) {
return new Promise((resolve, reject) => {
const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
$
.get(url,OPTIONS,function (data) {
resolve(data)
})
.fail(() => reject(id))
})
}
function onError(id){
console.log(`Se presento un error con el prsonaje ${id}.`)
}
async function obtenerPerosnajes() {
var ids = [1,2,3,4,5,6,7,8]
var promesas = ids.map(id => obtenerPersonaje(id))
try {
var personajes = await Promise.all(promesas)
console.table(personajes)
console.log(personajes)
} catch (id) {
onError
}
}
obtenerPerosnajes()
muy claro pero mas codigo
const API_URL = `https://pokeapi.co/api/v2/`
const PEOPLE_URL = `pokemon/:id`
const opts = { crossDomain: true}
function obtenerPersonaje(id){
return new Promise((resolve,reject) => {
const url = `${API_URL}${PEOPLE_URL.replace(`:id`,id)}`
$
.get(url,opts,function (data){
resolve (data)
})
.fail(()=> reject(id))
})
}
function onError(id) {
console.log(`sucedio un error al obtener el personaje ${id}`)
}
async function obtenerpersonajes(){
var ids = [1,2,3,4,5,6,7]
var promesas = ids.map(id=> obtenerPersonaje(id))
try {
var personajes = await Promise.all(promesas)
console.log(personajes)
} catch(id){
onError(id)
}
}
obtenerpersonajes()```
Excelente Sacha, quedó super claro
const API_URL = "https://swapi.dev/api/"
const PEOPLE_URL = "people/:id/"
const options = { crossDomain: true}
function getCharacter (id) {
return new Promise(function (resolve, reject) {
const url = `${API_URL}${PEOPLE_URL.replace(":id", id)}`
$.get(url, options, function (data) {
resolve(data)
})
.fail(() => reject(id))
})
}
function onError (id) {
console.log (`An error happened when we were trying to obtain the
information of the chracter ${id}`)
}
//Async-await permite guardar elementros de manera
//asincrona en una variable
async function getCharacters () {
var ids = [1,2,3,4,5,6,7]
var promises = ids.map (id => getCharacter(id))
try {
var character = await Promise.all(promises)
console.log (character)
} catch (id) {
onError(id)
}
}
getCharacters()```
Estoy corriendo mis programas en Brave y al parecer si soporta las promesas (y)
Hice un pequeño programa que trae “x Pokemones” y uno en especifico según el nombre.
Psdt: Sé que está feo, pero fue solo para practicar el asincronismo 😄
Esto es muy bueno!
Codigo de la clase
/*
Async-await es la manera más simple y clara de realizar tareas asíncronas.
Await detiene la ejecución del programa hasta que todas las promesas sean resueltas.
Para poder utilizar esta forma, hay que colocar async antes de la definición de la función,
y encerrar el llamado a Promises.all() dentro de un bloque try … catch.
*/
const API_URL = 'https://swapi.dev/api/'
// Constante para consultar una persona por su ID (1, 2, 3 ... )
const PEOPLE_URL = 'people/:id'
/* Este segundo parámetro es un objeto que le indica al método si el callback es local o remoto. */
const OPTS = { crossDomain: true }
/*
Clase 32 Promesas una solución al "Callback Hell"
En esta clase veremos las promesas, que son valores que aun no conocemos. Las promesas tienen tres estados:
► pending
► fullfilled (resolve)
► rejected
*/
// Ya no va a recibir un callback como parametro; lo va a invocar directamente
function obtenerPersonaje(id) {
// Constructor de una promesa -- Las promesas llevan Como parametro una funcion
return new Promise((resolve, rejected) => {
const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
$
.get(url, OPTS, function (data) {
resolve(data)
})
.fail(() => rejected(id))
})
}
/*
Funcion en caso de Error "OnError"
*/
function OnError(id) {
return console.log(`Ocurrió un error al obtener el personaje ${id}`)
}
/*
Funcion obtenerPersonajes que va a realizar lo que aniadimos la clase anterior sobre Multiples promesas en paralelo
*/
// Con la palabra async antes de fuction ► Hacemos la funcion "Asincrona"
async function obtenerPersonajes() {
var ids = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var promesas = ids.map((id) => obtenerPersonaje(id))
// Guardamos los personajes dento de una variable - Usamos "await" el cual detiene la ejecuacion de la tarea
// Hasta que todas las promesas se cumplan
// El await va dento del try y la accion que realizamos con la data recolectada
try {
var personajes = await Promise.all(promesas)
console.table(personajes)
} catch (id) {
onerror(id)
}
}
// Llamamos las funcion
obtenerPersonajes();
Async await
const API_URL = 'https://swapi.dev/api/'
const PLEOPLET_URL = 'people/:id/'
const opt = { crossDomain: true }
function obtenerPersonaje(id) {
return new Promise((resolve, reject) => {
const url = `${API_URL}${PLEOPLET_URL.replace(':id', id)}`
$
.get(url, opt, data => resolve(data))
.fail(() => reject(id))
})
}
async function obtenerPersonajes(){
var ids = [1,2,3,4,5,6,7,8]
var promesas = ids.map(id => obtenerPersonaje(id))
try {
var data = await Promise.all(promesas)
data.forEach((element, id) => {
let { name, height, skin_color } = element;
console.log(`Personaje #${id+1}: ${name}
altura: ${height}
color: ${skin_color}`)
})
} catch (id) {
console.log(`Fallo es personaje ${id}`)
}
}
obtenerPersonajes()
Para los que sientan que no tienen del todo claro el asincronismo vengan a este curso. Definitivamente les va a completar la información faltante y dudas que tengan.
Eso de de await Promise.all()
Esta genial
Esta sección del curso (Asincronismo) lo ubica como un excelente y completo curso, solo quería dejar como comentario que no se si esto sea parte del “Fundamento” ya que pienso que se requiere un poco de experticia y experiencia para llevar a cabo los ejercicios aqui propuestos.
Tuve que ver la seccion dos veces para clarificar todo, y la verdad es que no me arrepiento de nada :3.
Async Await
const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id'
const opts = {crossDomain:true}
function obtenerPersonaje(id){
return new Promise((resolve, reject)=>{
const url = `${API_URL}${PEOPLE_URL.replace(':id',id)}`
$
.get(url, opts, function(data){
resolve(data)
})
.fail(()=> reject(id))
})
}
function onError(id){
console.log(`Sucedio un error al obtener el personaje ${id}`)
}
async function obtenerPersonajes(){
var ids = [1,2,3,4,5,6,7]
var promesas = ids.map(id => obtenerPersonaje(id))
//la funcion se detiene hasta el await, hasta que se termine la promesa en ejecucion
try{
var personajes = await Promise.all(promesas)
console.log(personajes)
} catch (id){
onError(id)
}
}
obtenerPersonajes()
¿a ALGUIEN MAS LE PASO, QUE AL CONCLUIR LA PARTE TEÓRICA de fundamentos de JS aparece sobre arquitectura de computadores?.. !!!extraño muy extraño
El Async Await es la manera más sencilla de realizar las promesas, este se realiza como se programaba hace años de arriba hacia abajo, no horizontal ni encadenado.
Solo es necesario poner la palabra reservada del lenguaje await a las promesas, pero para poder utilizar await a la función tenemos que marcarla como asíncrona con la palabra reservada async.
¿ Cual es mejor practica, Async-await, o promise.all() ?
Me tardó demasiado. Pero, es una muy buena práctica.
Con async away ya no es necesario las key-word .then y .catch.
away: hace que el programa quede en esa línea hasta que se complete la promesa. Cuando se complete la promesa sigue ejecutando la siguiente línea del programa.
Use una función flecha para definir la función async
const API_URL='https://swapi.co/api/';
const PEOPLE_URL ='people/:id';
const opts = { crossDomain: true};
const obtenerPersonaje = (id)=>{
return new Promise( (resolve, reject) =>{
const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`;
$
.get(url, opts, (data)=>{
resolve(data);
})
.fail(()=>reject(id));
})};
const onError = (id)=>console.log(`Sucedió un error al obtener el personaje ${id}`);
let getPersonajes=async()=>{
var ids = [1,2,3,4,5,6,7];
var promises = ids.map((id) => obtenerPersonaje(id));
try {
var data = await Promise.all(promises);
console.log(data)
} catch (id) {
onError(id);
}
}
getPersonajes();```
const API_URL='https://swapi.co/api/';
const PEOPLE_URL ='people/:id';
const opts = { crossDomain: true};
const obtenerPersonaje = (id)=>{
return new Promise( (resolve, reject) =>{
const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`;
$
.get(url, opts, (data)=>{
resolve(data);
})
.fail(()=>reject(id));
})};
const onError = (id)=>console.log(`Sucedió un error al obtener el personaje ${id}`);
async function getPersonajes(){
var ids = [1,2,3,4,5,6,7];
var promises = ids.map((id) => obtenerPersonaje(id));
try {
var data = await Promise.all(promises);
console.log(data);
} catch (id) {
onError(id);
}
}
getPersonajes();```
Sea solo para una promesa o para un array de promesas, el async-await se utiliza, si entendí bien, así:
await para la variable en donde queremos que la data (en el caso de que la promesa sea fullfilled) se guarde, en nuestro caso es los objetos personaje que queremos obtener de manera asíncrona, y la palabra async se utiliza el la nomenclatura de la función que va a ejecutar la tarea asíncrona, en este caso obtenerPersonajes.
const API_URL = 'https://swapi.co/api/';
const PEOPLE_URL = 'people/:id';
function getPerson (id) {
return new Promise((resolve, reject) => {
const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
$.get(url, {crossDomain: true}, function (data) {
resolve({id, ...data})
})
.fail(() => reject(id))
})
}
const printPerson = res => console.log(`El personaje ${res.id} es ${res.name}`);
async function getPeople() {
let ids = [1,2,3,4,5,6,7]
let promises = ids.map(id => getPerson(id))
try {
let people = await Promise.all(promises)
people.map(printPerson)
}
catch (id) {
console.log(`Id ${id} not found`)
}
}
getPeople()
const API_URL = "https://swapi.co/api/"
//Async-await: otra manera de hace tareas asincronas
function getPeoplePromise(id){
const PEOPLE_URL = 'people/:id'
var REQUEST_URL = `${API_URL}${PEOPLE_URL.replace(':id',id)}`
var options = { crossDomain: true }
return new Promise( (resolve, reject) => {
$.get(REQUEST_URL, options, function(data) {
resolve(data)
})
.fail( () => reject(id))
})
}
function onError(id){
console.log(`Error, no se pudo encontrar el personaje ${id}`)
}
async function obtenerPersonajes() {
var ids = [1, 2, 3, 4, 5, 6]
var promesas = ids.map(id => getPeoplePromise(id))
try{
var personajes = await Promise.all(promesas)
console.log(personajes)
for(var i = 0; i < personajes.length; i++){
personaje = personajes[i]
console.log(`Hola, mi nombre es ${personaje.name}`)
}
}catch(id){
onError(id)
}
}```
const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id'
const opts = { crossDomain: null}
function obtenerPersonaje (id){
return new Promise((resolve, reject)=>{
const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
$
.get(url, opts, function(data){
resolve(data)
})
.fail(() => reject(id))
})
}
function onError(id){
console.log(`ocurrio un error al obtener el peronaje ${id}`)
}
async function obtenerPersonajes(){
var ids=[1, 2, 3 ]
var promesas = ids.map(function (id){
return obtenerPersonaje(id)
})
try{
var personajes = await Promise.all(promesas)
console.log(personajes)
}catch(id){
onError(id)
}
}
obtenerPersonajes()
Hola, al simular no tener conexion a internet a traves de la pestaña Network, obtengo el siguiente error : Sucedió un error al obtener el personaje ReferenceError: $ is not defined, como verán no sale el valor del id donde se genera el error, a alguien mas le pasa?
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?