JavaScript es un lenguaje de programación que se distingue de los demás en muchos sentidos. Una de las razones por la que este lenguaje es tan poderoso es que se basa en la ejecución de eventos. Esto nos permite crear acciones que serán ejecutadas en tiempos no inmediatos, lo que crea asincronía. En este post, te enseñaremos cómo crear promesas con setTimeout en JavaScript para ejecutar acciones asincrónicas.
¿Qué son las promesas con setTimeout en JavaScript?
Las promesas en JavaScript son un tipo de objeto global que nos permite preparar acciones para ser ejecutadas según escenarios que pueden o no suceder. Por ello, estos objetos son muy importantes para la creación de asincronía, un concepto que se refiere a la preparación de acciones para ser ejecutadas en caso de que algo suceda. Como no tenemos control sobre si este evento sucede o no, las acciones estarán preparadas para ejecutarse de manera inmediata, en un futuro o incluso nunca.
Si no sabes qué son las promesas en JavaScript ni cómo funcionan, te invitamos a leer nuestros artículos sobre promesas en JavaScript, estados de promesas en JavaScript y cómo crear una promesa en JavaScript con Math.random. Estos te ayudarán a tener el contexto necesario para entender cómo crear promesas con setTimeout en JavaScript.
Por su parte, el método setTimeout es una de las funciones disponibles para controlar el tiempo en JavaScript. Como puedes leer en nuestro post sobre los métodos setTimeout y setInterval en JavaScript, estos métodos nos permiten definir una acción y un tiempo. Con estos parámetros, definimos un tiempo, expresado en términos de milisegundos, tras el que la acción será ejecutada.
Entonces, las promesas con setTimeout en JavaScript son objetos que nos permiten crear acciones completamente asincrónicas. Por un lado, las promesas definirán bajo qué circunstancia sucede qué acción. Por el otro, el método setTimeout definirá cuánto tiempo debe transcurrir para que la promesa ejecute su resultado, ya sea resuelto o rechazado.
¿Cómo crear promesas con setTimeout en JavaScript?
Antes de crear promesas con setTimeout en JavaScript, pensemos en una promesa básica que luego podemos transformar. Como has podido leer en nuestro post sobre crear una promesa en JavaScript con Math.random, una promesa puede crear escenarios con todo tipo de variables. En este caso, creamos una promesa que, según el valor aleatorio devuelto por el método Math.random, se resuelve o se rechaza.
let promise = new Promise ((resolve, reject) => {
if (Math.random ( ) > 0.9) {
resolve (‘mayor que 0.9)
} else {
reject (‘menor de 0.9’)
}
})
Ahora, supongamos que queremos que, además del elemento de aleatoriedad de la promesa, haya una pausa antes de ser resuelta. Para ello, podemos añadir el método setTimeout.
Recuerda que para ejecutar este método necesitamos dos parámetros: un callback (una función) y un valor de tiempo en términos de milisegundos. Para añadir el callback a este método, tenemos dos opciones: insertamos la función directamente en el método o la guardamos en una variable que luego insertamos como parámetro.
A continuación, verás cómo se escribe la misma promesa anterior con el método setTimeout. Nota que en las líneas de código siguientes hemos decidido insertar la promesa como callback de manera directa:
let promiseWithSetTimout = new Promise ((resolve, reject) => {
setTimeout () => {
if (Math.random ( ) > 0.9) {
resolve (‘mayor que 0.9)
} else {
reject (‘menor de 0.9’)
}
}, 1200)
})
Ahora que hemos definido la promesa y el tiempo que debe transcurrir antes de ser completada (1.2 segundos), podemos definir cómo tratar esta promesa. Para ello, utilizamos los métodos then y catch de JavaScript. Estos métodos nos permitirán definir qué ocurre cuando la promesa funciona (método then) y qué ocurre cuando la promesa no funciona (método catch).
En este caso, definimos que, cuando la promesa funciona, pintaremos en pantalla un string y devolveremos la promesa. Luego, con el método catch, capturamos el error que nos aparece cuando la promesa no funciona y definimos un string para acompañarlo:
promiseWithTimeout.then (response => {
console.log (‘La promiseWithTimeout funciona:’, response)
}).catch (error => {
console.log (‘La promiseWithTimeout no funciona:’. error)
})
¿Cuál es el siguiente paso?
Ahora que sabes qué son las promesas con setTimeout en JavaScript y cómo usarlas para crear acciones asincrónicas, estás mucho más cerca de dominar este lenguaje de programación. Aun a´si, ¡todavía queda mucho por aprender! Para ello, te recomendamos apuntarte a nuestro Desarrollo Web Full Stack Bootcamp, una formación intensiva en la que seguirás aprendiendo sobre este y otros lenguajes de programación para la web. Así, te convertirás en un experto del desarrollo web en poco tiempo. ¡Anímate a dar el siguiente paso e inscríbete!
