Sobes.tech
Middle

Cuéntame sobre los principios de asincronía en JavaScript.

sobes.tech AI

Respuesta de la IA

Los principios de asincronía en JavaScript se basan en un modelo de ejecución de un solo hilo, donde las tareas que pueden tomar un tiempo considerable (por ejemplo, solicitudes de red, temporizadores) no bloquean el hilo principal, permitiendo realizar otras acciones. Esto se logra mediante:

  • Event Loop (Bucle de eventos): Mecanismo que verifica constantemente la cola de mensajes y ejecuta las tareas de ella. Cuando una operación asíncrona termina, su callback se coloca en la cola de tareas.
  • Funciones de callback: Funciones que se pasan como argumentos a otras funciones y se ejecutan después de que la operación asíncrona finaliza.
  • Promises (Promesas): Objetos que representan un valor final de una operación asíncrona, que puede ser resuelto (fulfilled) o rechazado (rejected). Facilitan el trabajo con código asíncrono, evitando el "callback hell".
  • Async/Await: Azúcar sintáctico sobre las promesas, que permite escribir código asíncrono en un estilo más legible y sincrónico. Las funciones marcadas con async siempre devuelven una promesa. El operador await solo puede usarse dentro de funciones async y pausa la ejecución hasta que la promesa se resuelva.

Comparación de enfoques:

Enfoque Legibilidad Manejo de errores Ejecución paralela
Callbacks Baja Complejo Puede ser no trivial
Promesas Media Conveniente .all(), .race()
Async/Await Alta Conveniente (try/catch) Se vuelve un poco más complejo

Ejemplo de uso de promesas:

fetch('/api/data') // Operación asíncrona
  .then(response => response.json()) // Manejo de éxito
  .then(data => console.log(data)) // Procesamiento de datos
  .catch(error => console.error('Error:', error)); // Manejo de errores

Ejemplo de uso de Async/Await:

async function fetchData() {
  try {
    const response = await fetch('/api/data'); // Espera la promesa
    const data = await response.json(); // Espera la promesa
    console.log(data);
  } catch (error) {
    console.error('Error:', error); // Manejo de errores
  }
}
fetchData();