Manejando el asincronismo

callback, promesas y async/await:

.
Un callback es una función que se pasa como argumento a otra función y se invoca después de que se complete una tarea asíncrona. Por ejemplo, imagina que tienes una función que obtiene datos de un servidor y quieres imprimir los datos en la consola cuando se complete la solicitud.

function getData(callback) {
  // Hacer la solicitud al servidor
  // ...
  // Cuando se complete la solicitud:
  callback(data);
}

getData(function(data) {
  console.log(data);
});

Las promesas son un método más nuevo para manejar el asincronismo en JavaScript. Una promesa representa un valor que puede estar disponible ahora, en el futuro o nunca. Las promesas tienen tres estados posibles: pendiente, resuelta y rechazada. Puedes encadenar promesas juntas para manejar múltiples tareas asincrónicas en secuencia.

function getData() {
  return new Promise((resolve, reject) => {
    // Hacer la solicitud al servidor
    // ...
    // Cuando se complete la solicitud:
    if (data) {
      resolve(data);
    } else {
      reject("No se pudo obtener los datos");
    }
  });
}

getData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

Finalmente, async/await es una forma más fácil y legible de manejar el asincronismo en JavaScript. Puedes usar la palabra clave async para declarar una función asíncrona y la palabra clave await para esperar a que se complete una tarea antes de continuar con la siguiente. Esto hace que el código sea más fácil de leer y entender.

async function imprimirDespuesDeUnSegundo() {
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
    }, 1000);
  });
  
  console.log("Hola"); // imprime "Hola" después de 1 segundo
}

imprimirDespuesDeUnSegundo();

Los cursos sugeridos y el reto, son un complemento perfecto para un excelente aprendizaje de este lenguaje, siento que estoy aprendiendo un montón y lo mejor de manera agradable y sin tanto dolor, (aunque cabe resaltar que me dan duro los playground) .
Gracias Luis por todos tus aportes cada clase los leo y gracias Platzi por este tipo de retos y ojala que vengan más retos como este 😁😁😁😁😁😁😊

36/89 Manejando el asincronismo
Las promesas en JavaScript para manejar operaciones asíncronas y controlar su flujo a través de callbacks y async/await.

Callbacks

Los callbacks son una forma de manejar la respuesta de una promesa en JavaScript. Se utilizan como argumentos de una función y se llaman en un algún momento después de que se complete la operación asíncrona. Sin embargo, anidar mútiple callbacks puede crear un Callback Hell, lo que dificulta la comprensión, el mantenimiento y la depuración del código.

operation1(function(result1) {
  operation2(result1, function(result2) {
    operation3(result2, function(result3) {
      operation4(result3, function(result4) {
        // ...continuar con más operaciones
      });
    });
  });
});

En este ejemplo se muestra cómo se utiliza un callback para mostrar los datos del usuario obtenidos de una API. La función getUserData toma un ID de usuario y una función de callback, y llama al callback con los datos del usuario como argumento una vez que se obtiene de la API. La función displayUserData es el callback que simplemente muestra el nombre del usuario en la consola.

Es importante tener en cuenta que, aunque los callbacks son una forma útil de manejar promesas en JavaScript, su uso excesivo puede hacer que el código sea dificil de leer y mantener. Por lo tanto, existen otras alternativas como async/await que se discuten en el texto original.

Promesas

Una forma de evitar el Callback Hell es utilizando Promesas o Async/Await en lugar de callbacks. Las promesas proporcionan una forma más estructurada y fácil de leer para manejar código asíncrono.

operation1()
  .then(result1 => {
    return operation2(result1);
  })
  .then(result2 => {
    return operation3(result2);
  })
  .then(result3 => {
    return operation4(result3);
  })
  .then(result4 => {
    // ...continuar con más operaciones
  })
  .catch(error => {
    // Manejar errores
  });

En el ejemplo proporcionado, se muestra cómo se puede reescribir el código anterior utilizando promesas. Cada operación devuelve una promesa que se encadena usando el método then(), lo que hcae que el código sea más legible y fácil de seguir en comparación con la versión anterior que usaba callbacks.

Async/Await

Es una técnica moderna para manejar promesas en JavaScript que hace que el código sea más fácil de leer y seguir en comparación con callbacks y promesas. En lugar de anidar varias funciones dentro de otras, el código utiliza palabras clave como async y await para indicar qué opereaciones son asíncronas y esperar hasta que se resuelvan

En el ejemplo proporcionado, la función getUserData usa la API fetch para obtener los datos del usuario y devuelve los datos como resultado. La función displayUserData llama getUserData y espera a que se resuelva la promesa antes de mostrar el nombre del usuario en la consola. La palabra clave try/catch es utilizada para manejar cualquier error que se produzca durante la ejecución de las funciones async/await

async function getUserData(userId) {
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.log(error);
  }
}

async function displayUserData(userId) {
  const data = await getUserData(userId);
  console.log(data.name);
}

displayUserData(1);

La función async/await getUserData se puede usar para buscar y devolver los detalles del usuario de una base de daatos remota. La función se puede llamar en otra función async/await para mostrar los detalles del usuario en una interfaz de usuario en línea.