El rechazo de promesa no propaga el error correctamente en JavaScript

En este artículo, intentaremos entender por qué el método de rechazo() de Promise no propaga el error correctamente, y luego veremos la solución para el mismo junto con ciertas explicaciones teóricas y ejemplos de codificación.

Primero echemos un vistazo rápido a la siguiente sección que nos ilustra sobre la sintaxis de cómo se creará una promesa.

Sintaxis: siguiendo la sintaxis, podemos usar para crear una nueva promesa que se resolverá o rechazará según la necesidad:

let promise_variable_name = new Promise ((resolve, reject) => {
    // Do something...
    // Either resolve it with certain parameters
    // inside resolve() method or either reject it
    // with reject statement in reject() method
});

Ahora echaremos un vistazo a la siguiente sintaxis mostrada de then() así como al método catch() que usaremos para ejecutar/capturar un error recibido de la promesa creada previamente:

promise_variable_name.then((result) => {
    // Do something with result parameter's value
})

// Further catch statement has to be added
// in case of any error caught
.catch((error) => {
    // Do something with this error variable
})

Ahora que hemos visto todas las sintaxis y las hemos analizado cuidadosamente, veamos un ejemplo rápido que nos ayudará a entender todo de una manera mucho mejor y más eficiente.

Ejemplo: en este ejemplo, crearemos una promesa utilizando la sintaxis que se muestra arriba y la ejecutaremos para mostrar el resultado correctamente en la consola.

<script>
    let promise = new Promise((resolve, reject) => {
        resolve("This article is available on "
            + "the GeeksforGeeks platform...");
    });
 
    promise
        .then((result) => console.log(result))
        .catch((error) => console.log(error));
</script>

Producción:

This article is available on the GeeksforGeeks platform...

Ahora que hemos visto la ejecución de la promesa usando el ejemplo anterior. Echemos un vistazo a los siguientes ejemplos en los que intentaremos analizar nuestro enunciado del problema así como su solución.

Ejemplo 1: 

• En este ejemplo, crearemos una función que aceptará un número (ya sea positivo o negativo), y luego crearemos una promesa a través de la sintaxis que se muestra arriba. 
• Luego, dentro de esa promesa, aplicaremos una condición (con la ayuda de una declaración if) que verificará el valor del número según el requisito. 
• Luego, si ese número coincide con el requisito, aplicaremos el método de rechazo() que contendrá una declaración determinada en sí mismo. Luego, agregamos una línea que no se requiere como salida en el lado de la consola, pero aun así, la agregamos para ver si nuestro código funciona bien o no. 
• Luego, por fin, llamaremos a nuestro método usando el método then() (para imprimir el resultado) y el método catch() (para detectar el error detectado, si es así).

<script>
    let checkNumValue = (num) => {
        return new Promise((resolve, reject) => {
            if (num === 0) {
                console.log("Zero number received...!!");
                reject("Stop code's execution since "
                    + "invalid number caught...");
            }
            console.log("This line is of no use, hence "
                + "not required in output...!!!");
        });
    };
 
    checkNumValue(0)
        .then((result) => console.log(result))
        .catch((error) => console.log("Caught Error: " + error));
</script>

Producción:

Zero number received...!!
This line is of no use, hence not required in output...!!!
Caught Error: Stop code's execution since invalid number caught...

Ahora, como hemos visto, se imprime una línea no deseada en la consola del navegador que no se requería aquí y la razón de esto es que cuando se llama al método de rechazo(), hará el trabajo y hará que el flujo de control continúe y detendría su ejecución hasta que algo pasara explícitamente después de la declaración de ejecución del método de rechazo().

Ejemplo 2: 

• En este ejemplo, tomaremos en consideración el código del ejemplo anterior y, además, agregaremos ciertos cambios en la función misma para que sea ejecutable según la necesidad. 
• En este método, después de la llamada a la función de rechazo(), agregaremos una declaración de retorno vacía que hará que la ejecución finalice o se complete en ese punto y no se moverá más. 
• Con esta declaración de retorno, se omite una línea adicional y no se mostrará en la consola del navegador como salida.

<script>
    let checkNumValue = (num) => {
        return new Promise((resolve, reject) => {
            if (num === 0) {
                console.log("Zero number received...!!");
                reject("Stop code's execution since "
                    + "invalid number caught...");
                return; // This line marks end of execution
            }
            console.log("This line is of no use, hence "
                + "not required in output...!!!");
        });
    };
 
    checkNumValue(0)
        .then((result) => console.log(result))
        .catch((error) => console.log("Caught Error: " + error));
</script>

Producción:

Zero number received...!!
Caught Error: Stop code's execution since invalid number caught...