Manejando el Orden y el Asincronismo en JavaScript

Clase 35 de 55 • Fundamentos de JavaScript 2018

Resumen

Una manera de asegurar que se respete la secuencia en que hemos realizado múltiples tareas es utilizando callbacks, con lo que se ejecutará luego, en cada llamada. Lo importante es que el llamado al callback se haga a través de una función anónima. Sin embargo, al hacerlo de esta manera generamos una situación poco deseada llamada CallbackHell.

Ivan Santiago

student•

Starling Mercedes

student•

lol

Jesus Ricardo Moreira Cedeño

student•

jajaja

Pablo Andres

student•

Resumen de la clase
Manejo del Orden y el Asincronismo de JavaScript

Agregamos primero otro parámetro a la función obtenerPersonaje().

obtenerPersonaje(id, callback)

Movemos la variable de la función al $.get.

$.get(url, opts, function(people){
    console.log(people.name)
})

Si queremos que lleguen en orden tenemos que hacer los requests uno después del otro y no en paralelo como los veníamos haciendo.
Para eso usamos el segundo parámetro en la función.

function obtenerPersonaje(id, callback) {
    const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
    $.get(url, opts, function(people){
        console.log(people.name)
    })
    if(callback) {
        callback()
    }
}

Así podemos invocar la función del callback de la siguiente manera:

obtenerPersonaje(1, function() {
    obtenerPersonaje(2, function() {
        obtenerPersonaje(3, function() {
            obtenerPersonaje(4)
        })
    })
})

Pero esto trae la problemática del anidamiento infinito llamado CallbackHell.

Geovanny G. Arguello Costta

student•

Creo que la función obtenerPersonaje() no esta del todo correcta compañero, ya que $.get al ser asíncrona saltara a evaluar if lo cual no garantiza cual llegue primero, la evaluación del callback debe estar dentro del tercer parámetro de $.get()

Moisés Abraham Croes Gómez

student•

Gracias @giothcode! efectivamente el if tiene que estar dentro del $.get, sino las solicitudes de personajes siguen siendo aleatorias

Boris Köhli-Richter

student•

Eso de encadenar callbacks es una pesima practica, se le denomima 'callbacks hell' y produce la espaguetización del código. Era algo muy comun en la epoca de jQuery ahce algunos años. Por suerte ahora tenemos las Promesas y async/await para solucionar eso.

Uriel Alberto Arevalo Franco

student•

Les comparto mi callbackhell multicolor

Juan Fernando López Hernández

student•

Esta bastante genial.

Juan José Peláez Hernández

student•

porqué el servidor entrega las consultas en desorden ?
Gracias 😄 !!

Miguel Angel Goda Molina

student•

las entrega en desorden por el asincronismo, JS solo puede hacer una cosa a la vez, pero puede delegar la ejecución de ciertas funciones a otros procesos, eso es el EVENT LOOP, donde la pila de ejecución o callstack va poniendo las llamadas a funciones según el orden de ejecución del programa, cuando termina de ejecutar una funcion la saca de la pila, si necesita saber algo pide al proceso que lo haga y cuando el proceso tiene respuesta la deja en al pila de tareas hasta que JS pueda mostrar el resultado y como puede demorar algunos pedidos mas que otros en el callstack lo muestra todo desordenado, por eso tenes que hacer el callback de este video para con funciones para evitar que llegue todo como se pueda y si que llegue en orden y asi pueda responder bien

Vincent Restrepo

student•

El servidor puede demorarse más ejecutando una que otra, o simplemente si el paquete de información se fue por otro camino, se pierde, luego el protocolo de red lo vuelve a pedir, se demora más. Se demora también porque simplemente en tu zona el internet bajó por un momento corto y provocó un retraso en unos paquetes que venían primero, etc…

Diego Alejandro Cifuentes Arango

student•

Creen que terminado este curso, tendría una base buena para ver react.js ?

Leonardo de los angeles Espinoza Hernandez

student•

Hola @diegoalejandrocifuentesarango

Ante de pasar a React de js te recomiendo un par de cosas:

1.-Terminar también estos cursos para que domines bien JS https://platzi.com/clases/basico-javascript/ https://platzi.com/clases/asincronismo-js/ https://platzi.com/clases/ecmascript-6/

2.- Recuerda que los cursos no lo son todo! debes de practicar mucho, vas a pasar muchos dolores de cabeza si no haces suficientes proyectos personales.

Espero te sirva mi comentario.

Kevin J. Zea Alvarado

student•

En la ruta de Frontend con React.js sugiere que tomes primero el curso de ECMAScript 6+ y el curso Profesional de JavaScript.

Terminando este curso vas a tener base para no perderte tanto en el curso de React.js; sin embargo, el profesor es claro con los temas que explica. Yo lo estoy cursando y no tengo tanto problema.

Te recomiendo que termines éste y, si lo prefieres, empieces con el de React.js. Si te parece algo pesado, regrésate con cursos más básicos como los que te recomendó @LeoCode0.

Adrian sosa

student•

Chicos, Pregunta para sacarme a duda, cuando preguntamos if(callback) esta pregutando si esta definido ese parametro no? en caso de que no quiere decir que no hay invocacion anidada no? Te marea este concepto jajaj, mil gracias! Slds.

Jesús Abano Ferrara

student•

Sí, en if(callback) se esta preguntando si realmente esta definido ese parámetro y dentro del condicional se escriben las sentencias que quieres. De lo contrario, si no se paso la función de callback, sencillamente no se hace nada y se salta el condicional.

Adrian sosa

student•

Buenisimo,

muy noob mi pregunta pero creo que es valida siendo que este concepto te marea bastante.

Mil gracias!!!

Paul Manobanda

student•

Interesante...mi primer Infierno de Callbacks :) :)!!!

Javier Romero

student•

y créeme yo quede loco jajajajaj

Alejandro Caputo

student•

viendo los comentarios me da miedo ponerle play jajajaj

Javier Romero

student•

yo te juro que no entiendo nada jajaja mejor esperar a que me enseñe el profesor oscar barajas en el curso de asincronismo tal vez lo explique de manera mas clara, tu que piensas amigo ?

Lorena Mosquera González

student•

Pensé que era la única en sentir así! :(

juan manuel alvarado pallares

student•

Franciree Arellán

student•

Callback hell!!!!!!!!!

Efraín Hernández García

student•

Tiene su chiste el asincronismo! No creí que fuera tan complejo

Bernardo Aguayo Ortega

student•

Juan Guillen Fortich

student•

¿Javascript o jquery han cambiado recientemente?. Porque a pesar de que tengo el mismo código los request se siguen ejecutando en paralelo.

const API_URL = 'https://swapi.dev/api/'
const PEOPLE_URL = 'people/:id'
var opts = { crossDomain: true }


function obtenerPersonaje(id, callback) {
    const url = `${ API_URL }${ PEOPLE_URL.replace(':id',id) }`

    $.get(url, opts, function (personaje) {
        console.log(`Hola, yo soy ${ personaje.name }`)
    })

    if(callback) {
        callback()
    }
}

obtenerPersonaje(1, function () {
    obtenerPersonaje(2)
})}

Bismark Socompi Rodriguez

student•

Hola, tienes un error, el If del callback tiene que ir en función $.get, justo despues del cosole.log. Tu lo tienes declarado fuera.!

Yhon Sebastian Corrales Pineda

student•

Si queremos traer n personajes en orden, podemos usar un for donde en la primera iteracion llamamos a la funcion ObtenerNombre con el indice i y en el callback la misma funcion pero con el indice i+1

const API_URL = 'https://swapi.co/api/'
        const PEOPLE_URL = 'people/:id'


        const options = { cossDomain: true }


        function obtenerPersonaje(id, callBack) {
            const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
            $.get(url, options, onResponse = (persona) => console.log(`Hola yo soy ${persona.name} y mido ${persona.height}`))
        }
        // Obetener 15 personajes
        for (let i = 1; i <= 15; i++) {
            obtenerPersonaje(i, function () {
                obtenerPersonaje(i + 1)
            });
        }```

Daniel Arturo Dominguez Lopez

student•

muy ingenioso !!

Cristian Córdova

student•

Callbacks Heeell!! Es un buen titulo para una película :D

LUIS ESTEBAN ORDOÑEZ ERAZO

student•

Si recargo varias veces el orden sigue siendo aleatorio, a alguien tambien le pasa?

este es mi código

const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id'
const opts = { crossDomain: true }
const onPeopleResponse = ({ name }) => console.log(`Hola, yo soy ${name}`)

function obtenerPersonaje(id, callback) {
	const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
	$.get(url, opts, onPeopleResponse)

	if (callback) {
		callback()
	}
}


/* Para garantizar el orden en el que se reciben los datos usamos callback
LOS REQUESTS SE HACEN EN SERIE
*/
obtenerPersonaje(1, function() {
	obtenerPersonaje(2, function() {
		obtenerPersonaje(3, function() {
			obtenerPersonaje(4, function() {
				obtenerPersonaje(5, function() {
					obtenerPersonaje(6, function() {
						obtenerPersonaje(7)
					}) // 6
				}) // 5
			}) // 4
		}) // 3
	}) // 2
}) // 1

Jahziel Duarte Cortez

student•

Me parece que la const onPeopleResponse la debes incluir como una función en los parámetros de la request (después de (url, opts, ...)), te dejo como lo tengo yo

function obtenerPersonaje(id, callback){
    const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`;

    $.get(url, opts, function (persona) { // Esta función solo se va a ejecutar si el REQUEST ers exitoso
        console.log(`Hola, yo soy ${persona.name}`)

        if (callback) { //si nos envían un CALLBACK lo llamamos
            callback()
        }
    })
}

Facundo Pérez Schneider

student•

Jahziel tiene razón, ya que debes incluir el if(callback){callback()} dentro de la funcion function(persona){}, que se encuentra dentro del código jQuery. Saludos :)

Cristobal Peña

student•

Espero volver del futuro pronto, y ofrecer una solución elegante mediante una función recursiva.

Hector Esau

student•

No sé si sea la mejor manera pero encontre que con arrow function es más sencillo usar los callback

const API_URL = 'https://swapi.dev/api/'
const PEOPLE_URL = 'people/:id'

const opts = {crossDomain: true}



function getCharacter(id, callback ){ //Callback puede ser nombrado como fn (de function) o cb (de callback)
    const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`

    $.get(url, opts, person => {
        console.log(`Hi, I'm ${person.name}`)
        if(callback){
            callback()
        }
    })
}

getCharacter(1, 
        () => getCharacter(2,
        () => getCharacter(3,
        () => getCharacter(4)
)))

Abel da Cunha

student•

Lgante

Manuel Aguilera Magaña

student•

Usando recursividad queda bien:

const API_URL = "https://swapi.co/api/";
const PEOPLE_URL = "people/:id";
const opts = { crossDamain: true };

function obtenerPersonaje(id, callback) {
	const url = `${API_URL}${PEOPLE_URL.replace(":id", id)}`;
	$.get(url, opts, function(persona) {
		console.log(`Hola, yo soy ${persona.name}`);
		if (callback) {
			callback();
		}
	});
}

var i = 0;
repetir();
function repetir() {
	if (i == 10) {
		return;
	}
	obtenerPersonaje(++i, function() {
		repetir();
	});
}

Jesús maldonado

student•

tenia un problema con los callbacks que ya solucione. (sin importar que hiciera los personajes se llamaban de forma desordenada)

¿me podrían explicar por que sucedía el error?teniendo el código de esta manera.

const API_URL = 'https://swapi.dev/api/';
const PEOPLE_URL = 'people/:id';


const opts = {crossDomain: true}


function obtenerPersonaje(id, callback) {
    const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`;
    $.get(url, opts, function(persona) {
        console.log(`hola, yo soy ${persona.name}`)
   
    });
if(callback) {
            callback()
        }
}

obtenerPersonaje(1, function() {
    obtenerPersonaje(2, function() {
        obtenerPersonaje(3, function() {
            obtenerPersonaje(4)
        })
    })
});

lo arregle colocando el if dentro del })

const API_URL = 'https://swapi.dev/api/';
const PEOPLE_URL = 'people/:id';


const opts = {crossDomain: true}


function obtenerPersonaje(id, callback) {
    const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`;
    $.get(url, opts, function(persona) {
        console.log(`hola, yo soy ${persona.name}`)

        if(callback) {
            callback()
        }
    });
}

obtenerPersonaje(1, function() {
    obtenerPersonaje(2, function() {
        obtenerPersonaje(3, function() {
            obtenerPersonaje(4)
        })
    })
});

¿por que esa diferencia genera ese error? no entiendo por que si saco el if de las llaves y los paréntesis es como si se rompiera el orden.

Eros Nahuel Puca

student•

Creeria que el

if(callback) {
            callback()
        }

al no estar en dentro de la función anónima que contiene el console.log hace que exista el asincronismo típico de JS

Jesús maldonado

student•

¿como así?