Implementar una función de suspensión en JavaScript

1. Implementar una función sleep() sin Promise, async y await en JavaScript
2. Implementar la función sleep() con Promise, async y await en JavaScript

Todo el mundo sabe que el lenguaje de programación JavaScript es un lenguaje de un solo subproceso, lo que significa que solo tiene una pila de llamadas y una pila de pila. Debido a esto, el código JavaScript solo se puede ejecutar línea por línea. Pero hay ocasiones en las que queremos realizar algunas operaciones que tardan algún tiempo en ejecutarse, y durante este tiempo, mantener al usuario esperando los resultados no es una buena idea.

Digamos que estamos realizando una llamada a la API; entonces, puede llevar algún tiempo obtener la respuesta del servidor. En lugar de esperar la respuesta, podemos agregar la palabra clave async antes de esa función que está haciendo la llamada a la API que devolverá un objeto Promise. Esto hará que esa función sea asincrónica, y luego, con la ayuda de await, esperaremos un tiempo. Durante ese tiempo, intentaremos completar otras tareas. Más tarde, podemos volver y mostrar los resultados de la llamada a la API tan pronto como recibamos la respuesta del servidor.

Con esto, podemos hacer uso efectivo del motor JavaScript. Para lograr esto, JavaScript nos proporciona un objeto Promise y algunas palabras clave como async y await. Una Promise es un evento que nos dice si una solicitud se resuelve o se rechaza. Siempre que solicitamos un recurso, hay dos cosas: nuestra solicitud se cumplirá o puede ser rechazada. Usando async, hacemos esa función asincrónica.

Implementar una función sleep() sin Promise, async y await en JavaScript

Primero veamos qué sucede cuando no usamos promise, async y await en nuestro programa. El siguiente código tiene 3 funciones func_1, func_2 y sleep(). La ejecución comenzará desde la función sleep(). Cuando comienza la ejecución, la función sleep() llamará a func_1 pero observe aquí que dentro de func_1 hay una función setTimeOut() que tiene un tiempo de espera de 3000ms (3 segundos). Ahora el func_1 esperará ese tiempo. Hasta entonces, se ejecutarán otras líneas de código.

const func_1 = () => {
  setTimeout(() => {return 'one'}, 3000);
};

const func_2 = () => {
  return 'two'
};

const sleep = () => {
  let first_response = func_1();
  console.log(first_response);

  let second_response = func_2();
  console.log(second_response);
};

sleep();

Producción :

undefined
two

Cuando console.log(first_response); se ejecuta, imprimirá undefined. Dado que func_1() está actualmente en estado de espera y luego first_response no tiene ninguno dentro. Esa es la razón por la que se imprime undefined. En JavaScript, existe un concepto de elevación en el que a todas las variables de un programa que se declaran pero no se inicializan se les asignará el valor de undefined. Así es como obtenemos undefined como salida.

La segunda función, func_2(), es sencilla. Aquí simplemente devolverá la cadena dos, y luego se almacenará dentro de la variable second_response y luego se imprimirá en la ventana de salida.

Implementar la función sleep() con Promise, async y await en JavaScript

Aquí, usaremos Promise, async y await y haremos algunas modificaciones menores en nuestro programa. Observe cómo obtenemos el valor undefined de la función func_1(). Entonces, solucionemos esto haciendo que la función sleep() sea asíncrona con async y luego espere o duerma un tiempo con la ayuda de await y luego obtenga la respuesta como el objeto Promise, que se devuelve por async.

const func_1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('The request is successful.');
    }, 3000);
  });
};

const func_2 = () => {
  return 'two'
};

const sleep = async () => {
  let first_response = await func_1();
  console.log(first_response);

  let second_response = func_2();
  console.log(second_response);
};

sleep();

Producción :

The request is successful.
two

El simple hecho de agregar la palabra clave async delante de la función no hace que esa función sea asincrónica. Para eso, donde quiera hacer una llamada asincrónica o esperar, tenemos que usar await en esa función, en este caso antes de func_1().

La palabra clave await se escribe antes de una función que permite que la función espere un tiempo y luego la ejecute. El tiempo hasta que esperará hasta que ejecute la función depende del tiempo especificado dentro de la función setTimeOut().

Dentro de la función, func_1, estamos devolviendo un objeto Promise que toma dos parámetros, el primero es el resolve y el segundo es el reject. Si la promesa se cumple con éxito, podemos utilizar el método resolve; de lo contrario, podemos utilizar el método reject.

Si ejecuta este programa, primero se llamará a func_1(), y luego el programa esperará 3 segundos ya que hemos usado setTimeOut() de 3000ms. Después de eso, devolverá la cadena The request is successful. como resultado de func_1, se almacenará en la variable first_response. Se llamará a func_2() y devolverá directamente dos como resultado, que luego se almacenará dentro de la variable second_response. Así es como logramos la funcionalidad sleep() en JavaScript.