Programacion Asincrona - Callbacks, Promise y async/await

Que es el Procesamiento Asincrono

El procesamiento asincrono es un mecanismo que permite continuar con otras operaciones sin esperar a que terminen las operaciones que consumen tiempo (lectura de archivos, llamadas a API, temporizadores, etc.).

flowchart LR
    subgraph Sync["Procesamiento Sincrono (esperar en orden)"]
        S1["Tarea 1"] --> S1C["Completada"] --> S2["Tarea 2"] --> S2C["Completada"] --> S3["Tarea 3"] --> S3C["Completada"]
    end

flowchart TB
    subgraph Async["Procesamiento Asincrono (ejecucion concurrente)"]
        A1["Tarea 1 Inicio"]
        A2["Tarea 2 Inicio"]
        A3["Tarea 3 Inicio"]
        A1C["Tarea 1 Completada"]
        A2C["Tarea 2 Completada"]
        A3C["Tarea 3 Completada"]
    end

Event Loop

JavaScript es de un solo hilo, pero logra el procesamiento asincrono mediante el event loop.

flowchart TB
    CallStack["Call Stack<br/>(Ejecuta codigo sincrono)"]
    EventLoop["Event Loop<br/>(Extrae de la cola cuando el call stack esta vacio)"]
    Microtask["Microtask Queue<br/>(Promise, queueMicrotask)<br/>Prioridad: Alta"]
    Macrotask["Macrotask Queue<br/>(setTimeout, I/O)<br/>Prioridad: Baja"]

    CallStack <--> EventLoop
    EventLoop --> Microtask
    EventLoop --> Macrotask

Ejemplo de Orden de Ejecucion

console.log('1'); // Sincrono

setTimeout(() => console.log('2'), 0); // Macrotask

Promise.resolve().then(() => console.log('3')); // Microtask

console.log('4'); // Sincrono

// Salida: 1, 4, 3, 2

Callbacks

El patron asincrono mas basico.

// Ejemplo de callback hell
fs.readFile('file1.txt', (err, data1) => {
  if (err) throw err;
  fs.readFile('file2.txt', (err, data2) => {
    if (err) throw err;
    fs.readFile('file3.txt', (err, data3) => {
      if (err) throw err;
      console.log(data1, data2, data3);
    });
  });
});

Problemas:

• El anidamiento se vuelve profundo (callback hell)
• El manejo de errores se vuelve complejo
• Baja legibilidad

Promise

Un objeto que representa la eventual finalizacion (o falla) de una operacion asincrona.

// Crear una Promise
const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve('Exito!');
    } else {
      reject(new Error('Fallo'));
    }
  }, 1000);
});

// Usar la Promise
myPromise
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log('Completado'));

Encadenamiento de Promises

fetchUser(userId)
  .then(user => fetchPosts(user.id))
  .then(posts => fetchComments(posts[0].id))
  .then(comments => {
    console.log(comments);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Promise.all / Promise.race

// Promise.all: Espera a que todas se completen
const results = await Promise.all([
  fetchUser(1),
  fetchUser(2),
  fetchUser(3)
]);
// → [user1, user2, user3]

// Promise.race: Devuelve la primera en completarse
const fastest = await Promise.race([
  fetchFromServer1(),
  fetchFromServer2()
]);

// Promise.allSettled: Obtiene todos los resultados (incluyendo fallos)
const results = await Promise.allSettled([
  fetchUser(1),
  fetchUser(999) // Usuario que no existe
]);
// → [{status: 'fulfilled', value: user1}, {status: 'rejected', reason: Error}]

async/await

Sintaxis azucarada para escribir Promises de forma mas intuitiva.

// Funcion async
async function fetchUserData(userId) {
  try {
    const user = await fetchUser(userId);
    const posts = await fetchPosts(user.id);
    const comments = await fetchComments(posts[0].id);
    return { user, posts, comments };
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

Ejecucion Paralela

// Ejecucion secuencial (lenta)
async function sequential() {
  const user1 = await fetchUser(1); // 1 segundo
  const user2 = await fetchUser(2); // 1 segundo
  const user3 = await fetchUser(3); // 1 segundo
  // Total: 3 segundos
}

// Ejecucion paralela (rapida)
async function parallel() {
  const [user1, user2, user3] = await Promise.all([
    fetchUser(1),
    fetchUser(2),
    fetchUser(3)
  ]);
  // Total: aproximadamente 1 segundo
}

Manejo de Errores

try/catch

async function fetchData() {
  try {
    const data = await riskyOperation();
    return data;
  } catch (error) {
    if (error.code === 'NOT_FOUND') {
      return null;
    }
    throw error; // Re-lanzar
  }
}

Error Wrapper

// Patron que devuelve error como array
async function safeAsync(promise) {
  try {
    const data = await promise;
    return [null, data];
  } catch (error) {
    return [error, null];
  }
}

// Uso
const [error, user] = await safeAsync(fetchUser(id));
if (error) {
  console.error('Failed to fetch user:', error);
  return;
}
console.log(user);

Concurrencia vs Paralelismo

flowchart LR
    subgraph Concurrent["Concurrencia (Concurrent)"]
        direction LR
        Note1["Multiples tareas se ejecutan superpuestas en el tiempo<br/>(Posible incluso con un solo hilo)"]
    end

    subgraph Parallel["Paralelismo (Parallel)"]
        direction LR
        Note2["Multiples tareas se ejecutan simultaneamente<br/>(Requiere multi-hilo/multi-nucleo)"]
    end

Procesamiento Paralelo en Node.js

// Worker Threads
const { Worker } = require('worker_threads');

function runCPUIntensiveTask(data) {
  return new Promise((resolve, reject) => {
    const worker = new Worker('./heavy-task.js', {
      workerData: data
    });
    worker.on('message', resolve);
    worker.on('error', reject);
  });
}

Iteracion Asincrona

// for await...of
async function* generateUsers() {
  for (let id = 1; id <= 3; id++) {
    yield await fetchUser(id);
  }
}

for await (const user of generateUsers()) {
  console.log(user);
}

// AsyncIterator
const stream = fs.createReadStream('large-file.txt');
for await (const chunk of stream) {
  console.log(chunk);
}

Antipatrones

Abuso de await

// Mal ejemplo: await innecesario
async function bad() {
  return await fetchData(); // await no es necesario
}

// Buen ejemplo
async function good() {
  return fetchData(); // Devolver la Promise directamente
}

Trampa de Ejecucion Secuencial

// Mal ejemplo: Ejecutar procesos independientes secuencialmente
const user = await fetchUser(id);
const config = await fetchConfig(); // No depende de user

// Buen ejemplo: Ejecucion paralela
const [user, config] = await Promise.all([
  fetchUser(id),
  fetchConfig()
]);

Resumen

La programacion asincrona es esencial para el desarrollo moderno de JavaScript. Ha evolucionado desde callbacks a Promise y async/await, permitiendo escribir codigo mas legible y mantenible. Al comprender el mecanismo del event loop y realizar un manejo de errores adecuado junto con ejecucion paralela, se puede lograr un procesamiento asincrono eficiente.