Captura de múltiples errores asíncronos

En este artículo, intentaremos comprender cómo podemos detectar múltiples errores asincrónicos (abreviados como «async» ) en JavaScript con la ayuda de ciertos ejemplos de codificación.

Primero comprendamos cómo podemos crear una función asíncrona (junto con el uso de la palabra clave await ) con la ayuda de las siguientes sintaxis ilustradas (la primera es a través de la declaración de función normal y la segunda es a través de la declaración de función de flecha).

Sintaxis: A continuación se muestra la primera sintaxis (básica) que usaremos al declarar la función asíncrona a través de la declaración de función normal.

async function function_name () {
    await data();
    ...
    // do something more as per need...
}

Otra sintaxis que podemos usar (la mejor) es si queremos optar por la declaración de la función de flecha (que es la mejor práctica).

let function_name = async () => {
     await data();
     ...
     // do something more as per need...
}

Ahora, después de comprender todas las sintaxis ilustradas anteriormente, es hora de que echemos un vistazo a la siguiente sección que contiene ciertos ejemplos de codificación que nos ayudarán a comprender nuestra tarea (de detectar múltiples errores asíncronos) de una manera mucho mejor y más eficiente. (aquí hemos utilizado la sintaxis de la función de flecha ya que es la mejor manera de implementación, el usuario también podría implementar la técnica de declaración de función normal):

Ejemplo 1: En este ejemplo, crearemos dos funciones de generación de errores asíncronos (con el uso de promesas y la función de temporizador setTimeout) y haremos que el estado de la promesa pasada sea rechazada, y luego detectaremos el error usando try/catch implementación de bloques.

<script>
    let first_async_error = () => {
        return new Promise((resolve, reject) => {
            reject("Something went wrong....!!");
        });
    };
  
    let second_async_error = () => {
        return new Promise((resolve, reject) => {
            reject("Error 404....!!");
        });
    };
  
    let catchAllErrors = async () => {
        try {
            await first_async_error();
        } catch (error) {
            console.log("First Error: " + error);
        }
  
        try {
            await second_async_error();
        } catch (error) {
            console.log("Second Error: " + error);
        }
    };
  
    catchAllErrors();
</script>

Producción:

First Error: Something went wrong....!!
Second Error: Error 404....!!

Ejemplo 2: en este ejemplo, tomaremos en consideración las funciones del código del ejemplo anterior que en realidad generaban errores asíncronos, pero aquí, mientras los capturamos, colocaremos el método catch() justo después de su llamada dentro de la variable, y luego generaremos el resultado que serán los mensajes de error.

<script>
    let first_async_error = () => {
        return new Promise((resolve, reject) => {
            reject("Something went wrong....!!");
        });
    };
  
    let second_async_error = () => {
        return new Promise((resolve, reject) => {
            reject("Error 404....!!");
        });
    };
  
    let catchAllErrors = async () => {
        let result_1 = await first_async_error().catch((error) => {
            return "First Error: " + error;
        });
  
        let result_2 = await second_async_error().catch((error) => {
            return "Second Error: " + error;
        });
  
        console.log(result_1);
        console.log(result_2);
    };
  
    catchAllErrors();
</script>

Producción:

First Error: Something went wrong....!!
Second Error: Error 404....!!