¿Cómo llamar a la promesa dentro de otra promesa en JavaScript?

En este artículo aprenderemos cómo llamar a una promesa dentro de otra promesa en JavaScript.

Declaración del problema: primero debe declarar una promesa utilizando su sintaxis básica en JavaScript y luego ejecutar la promesa predeclarada, necesita crear otra promesa que se llamará dentro de la promesa anterior para su ejecución.

Antes de analizar gráficamente la declaración del problema, primero comprendamos qué es exactamente la promesa y cómo declarar una promesa en JavaScript.

Promise es básicamente un objeto de JavaScript que es responsable de manejar todas las operaciones o actividades asincrónicas, como obtener datos de la API, etc.

Promise acepta dos parámetros dentro de una función (o función de devolución de llamada) que se pasa dentro de ella con el fin de ejecutar el resultado: el primer parámetro se resuelve, lo que eventualmente implica que su resultado se mostrará con éxito más tarde y otro parámetro se rechaza, lo que significa que sus datos no se mostrará correctamente tras la ejecución.

Ejemplo: La siguiente sintaxis se usaría para declarar y ejecutar una promesa en JavaScript.

<script>
let promise = new Promise((resolve, reject)=>{
    resolve('GeeksforGeeks');
})
.then((result)=>{
    console.log(result);
})
</script>

Producción:

GeeksforGeeks

Como ejemplo, comprendamos el escenario ilustrado anteriormente. Aquí primero debemos declarar una promesa usando la sintaxis de Promise, y usaremos el método then() para su ejecución y luego dentro de ese método then() crearemos otra promesa usando la misma sintaxis de Promise como se ilustra arriba, y luego llamaremos a nuestro resultado de primero dentro de esa nueva Promesa.

Ahora, después de analizar los hechos anteriores relacionados con nuestro enunciado del problema, veamos los siguientes enfoques para comprender y analizar nuestro enunciado del problema de manera más efectiva.

Enfoque 1: 

• Este es básicamente el enfoque nativo y simple en el que al principio podríamos comenzar declarando la promesa utilizando la sintaxis de promesa ilustrada anteriormente.
• Entonces podemos declarar nuestro método then() para manejar el resultado de esta promesa creada.
• Después del método then(), declararemos otra promesa usando la misma sintaxis de Promise.
• Luego llamaremos al resultado de nuestra primera promesa dentro de la segunda promesa y también para una mejor comprensión usaremos el resultado de nuestra primera promesa junto con el resultado de la segunda promesa para ver cómo funciona exactamente el proceso.

Ejemplo:

<script>
let firstPromise = new Promise((resolve, reject) => {
    resolve("Hello, ");
})
    .then((result) => {
        console.log(result);
        return new Promise((resolve, reject) => {
            resolve(result + "GeeksforGeeks!");
        })
            .then((result) => {
                console.log(result);
            });
    });
</script>

Producción:

Hello
Hello GeeksforGeeks!

Enfoque 2:

• En este enfoque, tomaremos en consideración el método setTimeout() para comprender mejor cómo funciona exactamente el proceso de llamada de promesa.
• Como se ilustra en el Enfoque-1, primero declare una nueva promesa y luego envuelva su resultado en el método setTimeout() y proporcione un retraso de 1000 ms (aproximadamente igual a 1 segundo).
• Luego, después de usar el método then() para ejecutar el resultado, declare otra promesa y dentro de esa segunda promesa primero imprima el resultado de la primera promesa.
• Luego, después del resultado de la primera promesa, envuelva el resultado de la segunda promesa también en el método setTimeout() y proporcione un retraso de tiempo de 2000 ms (aproximadamente igual a 2 segundos).
• Luego use el método then() para generar el resultado del segundo parámetro en la consola.

Ejemplo:

<script>
let firstPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Hello ");
    }, 1000);
})
    .then((result) => {
        console.log(result);
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(result + "GeeksforGeeks!");
            }, 2000);
        })
            .then((result) => {
                console.log(result);
            });
    });
</script>

Producción:

// After 1 second......
Hello 
   
// After 2 seconds.....
Hello GeeksforGeeks!