Scribd
Cargar
15 vistas22 páginas

DDS - (3 de 3) Javascript

El documento aborda la diferencia entre programación síncrona y asíncrona en JavaScript, destacando que JavaScript opera en un solo hilo y utiliza un modelo de Event Loop para manejar tareas asíncronas. Se explican conceptos como callbacks, promesas y la función fetch, así como la sintaxis de Async/Await para simplificar el manejo de operaciones asíncronas. Además, se mencionan problemas comunes como el 'Callback Hell' y se presentan ejemplos prácticos de cada concepto.

Cargado por

velasquezmaribel534
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
15 vistas22 páginas

DDS - (3 de 3) Javascript

El documento aborda la diferencia entre programación síncrona y asíncrona en JavaScript, destacando que JavaScript opera en un solo hilo y utiliza un modelo de Event Loop para manejar tareas asíncronas. Se explican conceptos como callbacks, promesas y la función fetch, así como la sintaxis de Async/Await para simplificar el manejo de operaciones asíncronas. Además, se mencionan problemas comunes como el 'Callback Hell' y se presentan ejemplos prácticos de cada concepto.

Cargado por

velasquezmaribel534
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 22

Unidad

Javascript
Universidad Tecnológica Nacional
Facultad Regional Córdoba
Cátedra: Desarrollo de Software
Programación síncrona vs asíncrona
JavaScript Síncrono
● Cada operación se hace de una vez, bloqueando el flujo de ejecución, el hilo es
bloqueado mientras espera la respuesta, cuando esta se procesa pasa a la siguiente
operación y así sucesivamente al terminar todas las operaciones.

console.log("Inicio proceso");
function procesoSecundario() {
console.log("Etapa 2 del proceso");
}
function procesoPrincipal() {
console.log("Etapa 1 del proceso");
procesoSecundario(); //llamada síncrona
console.log("Etapa 3 del proceso");
}
procesoPrincipal();
console.log("Fin");
JavaScript y su modelo de un solo hilo (Single Thread)
(Single Thread): en el contexto de JavaScript, significa que sólo un conjunto de
instrucciones se ejecuta a la vez en un único hilo de ejecución.

● Características:
○ JavaScript es un lenguaje de programación single-threaded
○ Opera en un único hilo en el entorno de ejecución (navegador o Node.js)
○ Las tareas se ejecutan secuencialmente y no en paralelo
● Modelo de ejecución basado en Event Loop:El bucle de eventos (Event Loop) es
el mecanismo utilizado para manejar tareas asíncronas y eventos en JavaScript
● Procesa tareas en la pila de llamadas (Call Stack) y en la cola de tareas (Task
Queue)
● Permite que JavaScript maneje operaciones asíncronas sin bloquear el hilo
principal
¿Cómo funciona con un solo thread javascript
de manera asincrónica?
JavaScript Asíncrono

● Concepto de programación asíncrona


● Ventajas de la programación asíncrona: mejor rendimiento,
experiencia de usuario y capacidad de respuesta
● Ejemplos de situaciones que requieren programación
asíncrona: solicitudes de API, lectura de archivos y
temporizadores
● Mecanismos asíncronos en JavaScript
○ Callbacks
○ Promises
○ Async / Await
Función asíncrona setTimeout
● setTimeout: función global de JavaScript que permite ejecutar una función o
bloque de código después de un período de tiempo especificado

let idTimeout = setTimeout(funcion, retraso);


● Recibe dos argumentos principales: una función (callback) y un tiempo de espera
en milisegundos
● Registra el callback en un "temporizador"
● Después del tiempo de espera especificado, el callback se agrega a la cola de
tareas
● El callback se ejecuta cuando el hilo principal de JavaScript está disponible
(JavaScript es de un solo hilo)
Ejemplo de llamada asíncrona con setTimeout

function mensaje() {
console.log('Proceso asíncrono que se ejecuto a las ' +
(new Date()).toLocaleTimeString());
}

console.log("Inicio a las " + (new


Date()).toLocaleTimeString());
setTimeout(mensaje, 2000);
console.log("Fin a las " + (new
Date()).toLocaleTimeString());
Callbacks
● Definición de callback: función que se pasa como argumento a otra
función y se ejecuta una vez que se completa una tarea.

function leerArchivo(callback) {
// Simulando lectura de archivo
setTimeout(() => {
const resultado = 'Contenido del
archivo'; Realizamos un callback
callback(resultado);
}, 1000);
}
Pasamos una arrow
leerArchivo((contenido) => { function como parámetro
console.log(contenido);}
Callbacks - Problemas
Callback Hell: término utilizado para describir el anidamiento profundo y excesivo
de funciones callback en el código, lo que puede resultar en una estructura de
código difícil de leer, mantener y depurar.

Causas:

● Ejecución de múltiples operaciones asíncronas en secuencia o en paralelo


● Manejo de errores en cada nivel de anidamiento
● Falta de buenas prácticas de programación y estructuración del código
Problemas del callback - Pirámide de la Perdición
Promesas en Javascript
● Una Promesa es un objeto que representa el resultado eventual de una
operación asíncrona. Permite organizar y gestionar callbacks de manera más
estructurada y legible, facilitando el manejo de errores y el control del flujo de
ejecución
● Estados:
○ Pendiente (Pending).
○ Resuelta (Fulfilled).
○ Rechazada (Rejected).
○ Arreglada (Setted) ha sido resuelta o rechazada.
Promesas - ejemplo
function leerArchivo() {
return new Promise((resolve, reject) => {
Ventajas de las promesas:
// Simulando lectura de archivo mejor manejo de errores,
setTimeout(() => {
const resultado = 'Contenido del archivo';
composición más sencilla y
resolve(resultado); código más legible
}, 1000);
});
}

leerArchivo()
.then((contenido) => {
console.log(contenido);
})
.catch((error) => {
console.error(error);
});
Función fetch para obtener datos con HTTP
(implementa modelo de promesas)

● fetch:API moderna de JavaScript para realizar solicitudes HTTP y gestionar


respuestas, basada en Promesas.
○ Reemplaza XMLHttpRequest para simplificar y mejorar la experiencia de trabajo con
solicitudes asíncronas.
● Características:
○ Sintaxis más clara
y sencilla
○ Basada en Promesas
Función fetch - estructura

fetch(url, parámetros) .then((res)=>{return res.json()})


// se obtiene el objeto respuesta
.then((json)=>{...}) //procesa el objeto json con los datos
.catch((error)=>{...}) // Procesa el error si existiera
.finally(()=>{...}) bloque opcional que se ejecuta siempre
Función fetch - llamada simple
fetch('https://restcountries.com/v3.1/alpha/arg')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});
Método fetch - llamadas encadenadas
(evita la pirámide de la perdición)
function obtener_pokemon(id){
let url = "https://pokeapi.co/api/v2/pokemon/" + id;
return fetch(url).then(res => {return res.json()});
}
obtener_pokemon(1).then(data => {
console.log(data.name);
return obtener_pokemon(2);
}).then(data =>{
console.log(data.name);
return obtener_pokemon(3);
}).then(data =>{
console.log(data.name);
return obtener_pokemon(4);
}).then(data =>{
console.log(data.name);
})
Async - Await
● Async/Await: muy utilizado para trabajar con promesas en JavaScript de
forma más sencilla y legible.
● Async:
○ Palabra clave utilizada para definir una función asíncrona
○ Indica que la función siempre devuelve una promesa
○ Facilita el uso de await dentro de la función
● Await:
○ Palabra clave que se utiliza para esperar la resolución de una promesa de tal forma que
podamos volver nuestro código síncrono.
○ Sólo puede usarse dentro de funciones async
○ Detiene la ejecución de la función hasta que se resuelva la promesa, sin bloquear el hilo
principal
async function fetchData(url) {
try {
Ejemplo async/await
const response = await fetch(url);

if (!response.ok) {
throw new Error(`Error en la solicitud: $
{response.status}`);
}

const data = await response.json();


console.log('Datos recibidos:', data);
} catch (error) {
console.error('Error al realizar la solicitud:', error);
}
}

fetchData('https://pokeapi.co/api/v2/pokemon/');

También podría gustarte