Catching multiple async errors

In this article, we will try to understand how we may catch multiple asynchronous (abbreviated as "async") errors in JavaScript with the help of certain coding examples.

Let us first understand how we may create an async function (along with the usage of await keyword) with the help of the following illustrated syntaxes (the first one is through normal function declaration and the second one is via arrow function declaration).

Syntax: Following shown is the first syntax (basic one) which we will use while declaring the async function via normal function declaration.

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

Another syntax that we may use (the better one) is if we want to opt for arrow function declaration (which is the best practice).

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

Now after understanding all of the above-enlightened syntaxes it's high time we must have look into the following section that contains certain coding examples which will help us to understand our task (of catching multiple async errors) in a much better and more efficient manner (here we have used arrow function syntax since it is the best way of implementation, normal function declaration technique could be also be implemented by the user):

Example 1: In this example, we will create two async errors generating functions (with the usage of promises and setTimeout timer function) and will make the state of the passed-in promise as rejected, and then we will catch the error using try/catch block implementation.

<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>

Output:

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

Example 2: In this example, we will take into consideration the previous example's code's functions which were actually generating async errors but here while catching them we will put the catch() method just after their calling inside the variable, and then we will output the result which will be the error messages.

<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>

Output:

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

amansingla

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• JavaScript-Questions
• JavaScript-Statements