Asincronismo en JavaScript
Cargado por
Diego CañonAsincronismo en JavaScript
Cargado por
Diego CañonAsincronismo en JavaScript
ASINCRONISMO
La comunicación
con el Event Loop El Event Loop pasa el
es a través de Callback a la Pila (Call
mensajes Stack) cuando esta
Javascript es un lenguaje esta vacía.
de programación Ejecución I/O-Bound
asíncrono y no Callback_1 Callback_2
bloqueante, con un
manejador de eventos
conocido como Event
Loop, implementado en
un único hilo para sus
interfaces de entrada y
Función_3 MEMORIA
salida. (Callback_2)
Función_2
Ejecución CPU-Bound
Función_1
(Callback_1)
CASOS A CONSIDERAR
• Una aplicación con muchas funciones UPC-Bound que no vacía el Call Stack, sin posibilidad para
procesar los mensajes en el Event Loop.
• El numero de mensajes y callbacks supera la capacidad de procesamiento del Even Loop debido
a que hay demasiados eventos a la vez.
• Una función callback con procesamiento intensivo UPC-Bound, genera demora en la ejecución
de los mensajes en el Event Loop y demoras en las funciones a ejecutar que están en el Call
Stack.
Desarrollar en lo posible con muchas • I/O-Bound
funciones que ejecuten instrucciones Web Workers
rápidas y liberen el Call Stack rápidamente. • Procedimientos
EL TIEMPO EN JAVASCRIPT
<body>
<H1>PRUEBAS JAVASCRIPT</H1>
<!--script src="codigojs.js"></script-->
<script>
console.log(`a`)
console.log(`b`)
console.log(`c`)
</script>
</body>
<body>
<H1>PRUEBAS JAVASCRIPT</H1>
<!--script src="codigojs.js"></script-->
<script>
console.log(`a`)
setTimeout (function() {console.log(`b`)}, 4000)
console.log(`c`)
</script> 4000 milisegundos
</body>
setTimeout(() => console.log(`b`), 4000)
EL TIEMPO EN JAVASCRIPT
<body>
<H1>PRUEBAS JAVASCRIPT</H1>
<!--script src="codigojs.js"></script-->
<script>
console.log(`a`)
setTimeout(() => console.log(`b`), 0)
console.log(`c`)
</script>
</body>
<body>
<H1>PRUEBAS JAVASCRIPT</H1>
<!--script src="codigojs.js"></script-->
<script>
console.log(`a`)
setTimeout(() => console.log(`b`), 4000)
for (var i=0; i<10; i++){
console.log(i)
}
console.log(`c`)
</script>
</body>
Webpack -> npm
Linkedin. Migraron el backend
a Node.js consiguiendo
reducir de 30 servidores a tan
solo 3 servidores.
Ryan Lienhart Dahl
PREPARACIÓN DE PROYECTO
ESTRUCTURA DEL PROYECTO
FUNCIÓN CALLBACK
CALL BACK
const API_URL = 'https://swapi.dev/api/'
const PEOPLE_URL = 'people/:id'
const lukeUrl = `${API_URL}${PEOPLE_URL.replace(`:id`,1)}`
const opcion = {crossDomain: true}
$.get(lukeUrl,opcion, function (luke){
console.log(`Hola yo soy ${luke.name}`)
})
https://swapi.dev/
function get(URL, callback){
const xhr=new XMLHttpRequest ();
xhr.onreadystatechange =function(){
const DONE =4
const OK = 200
if (this.readyState === DONE){
if(this.status === OK){
callback(null, JSON.parse(th
is.responseText))
}else{
callback(new ERROR (`Se prod
ujo un error al realizar el request: ${this.
status}`))
}
}
xhr.open('GET', URL);
xhr.send(null);
}
get('https://swapi.dev/api/planets/20/', fun
ction onResponse (err, luke){
if(err) return console.log (`Request fai
led: ${err}`)
console.log(`Request succeded`)
console.log('luke',luke)
})
https://codepen.io/pen/
XMLHttpRequest
https://developer.mozilla.org/es/docs/Web/API/X
MLHttpRequest/Using_XMLHttpRequest
Callback Hell
http://callbackhell.com/
Promesas
